Telerik Forums
Community Forums Forum
8 answers
176 views
1 answer
34 views
Here's my current code, where on the button clicks I'm opening a popup in which the user can type anything and insert it into the cursor position, it's working fine.

Problem:- When I save my text like this <p>I’m looking for the parsing to keep my deeply nested div structure but the deepest div allows inline content. For some reason, a new div gets injected though. Which I’m later removing. I’d rather not have that hack though. My name is&nbsp;<span contenteditable="false" class="uneditable" style="user-select: none; opacity: 0.5; background-color: red; padding: 2px;" id="12312381829919">rahul</span>.</p>
where rahul is a custom value inserted using a popup with properties like id & style 

but when I parse this value onMount from API, the editor doesn't keep my style and id properties and when inspected the text in the editor looks like 

<p>I’m looking for the parsing to keep my deeply nested div structure but the deepest div allows inline content. For some reason, a new div gets injected though, which I’m later removing. I’d rather not have that hack though. My name is&nbsp;<span contenteditable="false" class="uneditable" >rahul</span>.</p>

which Is without ID and style tag 

here's my code for reference 

import React, { useRef, useState } from "react";
import { Editor, EditorTools, EditorUtils, ProseMirror } from "@progress/kendo-react-editor";
import "@progress/kendo-theme-default/dist/all.css";
import { Button } from "@progress/kendo-react-buttons";
import { Dialog, DialogActionsBar } from "@progress/kendo-react-dialogs";
import { Input } from "components/atoms/input/Input";

export default function KendoEditor({ type, updateData, initalVal }) {
  const [isDialogVisible, setDialogVisible] = useState(false);
  const [customData, setCustomData] = useState("");
  const [value, setValue] = useState("test");
  var initialValue =
    type === "header" || type === "footer" ? initalVal?.data?.content : initalVal?.content;
  const editorRef = useRef(null);
  const {
    Bold,
    Italic,
    Underline,
    Strikethrough,
    Subscript,
    Superscript,
    ForeColor,
    BackColor,
    CleanFormatting,
    AlignLeft,
    AlignCenter,
    AlignRight,
    AlignJustify,
    Indent,
    Outdent,
    OrderedList,
    UnorderedList,
    NumberedList,
    BulletedList,
    Undo,
    Redo,
    FontSize,
    FontName,
    FormatBlock,
    Link,
    Unlink,
    InsertImage,
    ViewHtml,
    InsertTable,
    InsertFile,
    SelectAll,
    Print,
    Pdf,
    TableProperties,
    TableCellProperties,
    AddRowBefore,
    AddRowAfter,
    AddColumnBefore,
    AddColumnAfter,
    DeleteRow,
    DeleteColumn,
    DeleteTable,
    MergeCells,
    SplitCell,
  } = EditorTools;
  const { Schema, EditorView, EditorState } = ProseMirror;
  const nonEditable = {
    name: "nonEditable",
    inline: true,
    group: "inline",
    content: "inline+",
    marks: "",
    attrs: {
      contenteditable: { default: null },
      class: { default: null },
      style: { default: null },
      id: { default: null },
    },
    atom: true,
    parseDOM: [{ tag: "span.uneditable", priority: 51 }],
    toDOM: (node) => [
      "span",
      {
        contenteditable: false,
        class: "uneditable",
        style:
          "user-select: none; opacity: 0.5; background-color: red;text-weight:600;padding:2px;",
        id: node.attrs.id,
      },
      0,
    ],
  };

  const toggleSidebar = (type, props) => {
    return (
      <Button
        onClick={() => {
          setDialogVisible(true);
          //  setActiveProperties(type);
        }}
        onMouseDown={(e) => e.preventDefault()}
        onPointerDown={(e) => e.preventDefault()}
        title="Insert Custom Data"
        imageUrl="https://demos.telerik.com/kendo-ui/content/shared/icons/sports/snowboarding.png"
        imageAlt="KendoReact Buttons Snowboarding icon"
      />
    );
  };

  const handleInsertCustomData = () => {
    const { view } = editorRef.current;
    const schema = view.state.schema;

    // get the new node from the schema
    const nodeType = schema.nodes.nonEditable;

    // create a new node with the custom data
    const node = nodeType.createAndFill(
      {
        class: "uneditable", // Keep the existing classes
        style: "user-select: none; opacity: 0.5; background-color: red;", // Add red background color
        id: "nernksf", // Add unique ID using new Date()
      },
      schema.text(customData)
    );

    // Insert the new node
    EditorUtils.insertNode(view, node);
    view.focus();

    // Close the dialog
    setDialogVisible(false);
    setCustomData("");
  };
  console.log(initialValue);
  const onMount = (event) => {
    const { viewProps } = event;
    const { plugins, schema } = viewProps.state;

    let nodes = schema.spec.nodes.addToEnd("nonEditable", nonEditable);

    const mySchema = new Schema({ nodes: nodes, marks: schema.spec.marks });

    console.log(type, initialValue);
    const doc = EditorUtils.createDocument(mySchema, initialValue ? initialValue : "");

    return new EditorView(
      { mount: event.dom },
      {
        ...event.viewProps,
        state: EditorState.create({ doc, plugins }),
      }
    );
  };
  //console.log(value);
  const handleEditorChange = (event) => {
    const data = event?.html;
    //console.log(data);
    setValue(data);
    if (type === "header" || type === "footer") {
      updateData({ visible: initalVal?.visible, data: { ...initalVal?.data, data } });
    } else {
      updateData({ ...initalVal, data });
    }
  };
  return (
    <div>
      <Editor
        ref={editorRef}
        onMount={onMount}
        onChange={handleEditorChange}
        tools={[
          [Bold, Italic, Underline, Strikethrough],
          [Subscript, Superscript],
          ForeColor,
          BackColor,
          [CleanFormatting],
          [AlignLeft, AlignCenter, AlignRight, AlignJustify],
          [Indent, Outdent],
          [OrderedList, UnorderedList],
          [NumberedList, BulletedList],
          FontSize,
          FontName,
          FormatBlock,
          [SelectAll],
          [Undo, Redo],
          [Link, Unlink, InsertImage, ViewHtml],
          [InsertTable, TableProperties, TableCellProperties],
          [AddRowBefore, AddRowAfter, AddColumnBefore, AddColumnAfter],
          [DeleteRow, DeleteColumn, DeleteTable],
          [MergeCells, SplitCell],
          [
            (props) => toggleSidebar("dataSourceProperties", props),
            (props) => toggleSidebar("formulaProperties", props),
            (props) => toggleSidebar("letterProperties", props),
            (props) => toggleSidebar("conditionBuilder", props),
          ],
        ]}
        contentStyle={{
          height: 320,
        }}
        //value={initialValue}
      />
      {isDialogVisible && (
        <Dialog
          title="Insert Custom Data"
          onClose={() => setDialogVisible(false)}
          visible={isDialogVisible}
        >
          <div>
            <Input
              type="text"
              value={customData}
              onChange={(e) => setCustomData(e.target.value)}
              label="Enter name"
            />

            <DialogActionsBar>
              <button
                className="k-button k-button-md k-rounded-md k-button-solid k-button-solid-base"
                onClick={() => setDialogVisible(false)}
              >
                No
              </button>
              <button
                className="k-button k-button-md k-rounded-md k-button-solid k-button-solid-base"
                onClick={handleInsertCustomData}
              >
                Yes
              </button>
            </DialogActionsBar>
          </div>
        </Dialog>
      )}
    </div>
  );
}

4 answers
102 views
good day to all .. i'm actually very passionate about music since I graduated from a music school in piano .. but now I'm more passionate about the guitar .. now I want to do something, namely a mobile application specifically for guitar music .. maybe someone will tell someone who can help?
Christopher
Top achievements
Rank 1
 answered on 05 Feb 2023
1 answer
88 views

Hello Everyone, My Name is Gulshan Negi and i am new here. I am in the Second Year of my engineering and want to learn web development, please suggest me what are the best front end web framework to learn, as a computer science student i want to make my career in the programming and web development so i decided to learn, please suggest best frameworks and from where i learn. 

Thanks

Dimo
Telerik team
 answered on 08 Apr 2021
0 answers
66 views
Hi everyone

I hope that we will have a great time 🥳

peterson
Top achievements
Rank 1
 asked on 24 May 2020
7 answers
97 views
I'm just new here and I'm glad to be a part of this community. I know it's a great Forum site:)
peterson
Top achievements
Rank 1
 answered on 24 May 2020
4 answers
60 views
Hi everyone. I am new to this forum. 
Jonh
Top achievements
Rank 1
 answered on 18 Sep 2019
0 answers
39 views
Hi everyone, I'd like to introduce myself. I am John and I live in the Netherlands. I want to share my experiences with Telerik with you and maybe discuss some coding, so that's why I'm here. I work for a company that is making an application to help people with suicidal thoughts. 

What do you guys do for a living? And where do u live?

John
Top achievements
Rank 1
 asked on 21 Jan 2019
0 answers
37 views
Hello. I am a new member ! Nice to meet you! I'm sure this place is very good.
madamx
Top achievements
Rank 1
 asked on 18 Jun 2018
2 answers
57 views
hello, i can't post any where then i post hear. so sorry. i just found an abandoned kitten near the house. I tried giving it milk, or something like me looking at google. But it still does not eat at all. So what do I do now?
Gigi
Top achievements
Rank 2
 answered on 07 Jun 2018
Narrow your results
Selected tags
Tags
+? more
Top users last month
horváth
Top achievements
Rank 2
Iron
Iron
Steve
Top achievements
Rank 2
Iron
Erkki
Top achievements
Rank 1
Iron
Mark
Top achievements
Rank 2
Iron
Iron
Veteran
Jakub
Top achievements
Rank 1
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
horváth
Top achievements
Rank 2
Iron
Iron
Steve
Top achievements
Rank 2
Iron
Erkki
Top achievements
Rank 1
Iron
Mark
Top achievements
Rank 2
Iron
Iron
Veteran
Jakub
Top achievements
Rank 1
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?