ekm-ui 0.3.78 → 0.3.83

package/src/rich-text-editor/index.tsx

@@ -1,215 +0,0 @@
-import { CKEditor } from "@ckeditor/ckeditor5-react";
-import React, { useEffect, useState } from "react";
-import {
-  FaBold,
-  FaItalic,
-  FaRemoveFormat,
-  FaStrikethrough,
-  FaUnderline,
-} from "react-icons/fa";
-import HeadlessEditor from "./headless-editor";
-
-type AdditionalProps = {
-  onDataChange?: (data: string) => void;
-  selectedText?: string | null;
-  onSelectedTextChange?: (text: string | null) => void;
-  additionalToolbarItems?: React.ReactNode;
-};
-
-export function RichTextEditor(
-  props: Omit<CKEditor<HeadlessEditor>["props"], "editor"> & AdditionalProps
-) {
-  const [editor, setEditor] = useState<HeadlessEditor | null>(null);
-
-  useEffect(() => {
-    editor?.listenTo(editor?.model.document.selection, "change:range", (e) => {
-      const selectedText = editor?.model.document.selection;
-      const range = selectedText?.getFirstRange();
-      if (range) {
-        let text = "";
-        for (const item of range.getItems()) {
-          // @ts-ignore
-          text += item.data;
-        }
-        if (props.onSelectedTextChange) {
-          props.onSelectedTextChange(text);
-        }
-      }
-    });
-
-    editor?.model.document.on("change:data", () => {
-      if (props.onDataChange) {
-        props.onDataChange(editor?.getData() || "");
-      }
-    });
-  }, [editor, props.onDataChange, props.onSelectedTextChange]);
-
-  return (
-    <div className="mb-4 w-full rounded-lg border border-gray-200 bg-gray-50 dark:border-gray-600 dark:bg-gray-700">
-      <Toolbar editor={editor} additionalItems={props.additionalToolbarItems} />
-      <CKEditor
-        editor={HeadlessEditor}
-        {...props}
-        onReady={(editor) => {
-          setEditor(editor);
-          // @ts-ignore
-          window.editor = editor;
-          const className =
-            "px-4 py-2 bg-white rounded-b-lg dark:bg-gray-800 block w-full text-sm text-gray-800 bg-white border-0 dark:bg-gray-800 focus:ring-0 dark:text-white dark:placeholder-gray-400";
-
-          editor.editing.view.change((writer) => {
-            const root = editor.editing.view.document.getRoot();
-            if (root) {
-              writer.removeClass(
-                [
-                  "ck-content",
-                  "ck-editor__editable",
-                  "ck-rounded-corners",
-                  "ck-editor__editable_inline",
-                ],
-                root
-              );
-              writer.addClass(className, root);
-            }
-          });
-        }}
-      />
-    </div>
-  );
-}
-
-function Toolbar({
-  editor,
-  additionalItems,
-}: {
-  editor: HeadlessEditor | null;
-  additionalItems?: React.ReactNode;
-}) {
-  return (
-    <div className="flex items-center justify-between border-b px-3 py-2 dark:border-gray-600">
-      <div className="flex flex-wrap items-center divide-gray-200 dark:divide-gray-600 sm:divide-x">
-        <div className="flex items-center space-x-2 sm:pr-4">
-          {additionalItems}
-          <EditorToolbarButton
-            commandName="bold"
-            label="Bold"
-            editor={editor}
-          />
-          <EditorToolbarButton
-            commandName="italic"
-            label="Italic"
-            editor={editor}
-          />
-          <EditorToolbarButton
-            commandName="underline"
-            label="Underline"
-            editor={editor}
-          />
-          <EditorToolbarButton
-            commandName="strikethrough"
-            label="Strikethrough"
-            editor={editor}
-          />
-          <EditorToolbarButton
-            commandName="removeFormat"
-            label="Remove format"
-            editor={editor}
-          />
-        </div>
-      </div>
-    </div>
-  );
-}
-
-function EditorToolbarButton({
-  editor,
-  commandName,
-  commandValue = null,
-  label,
-}: {
-  editor: HeadlessEditor | null;
-  commandName: keyof typeof iconMap;
-  commandValue?: string | null;
-  label: string;
-}) {
-  const command = editor ? editor.commands.get(commandName) : null;
-  const [isOn, setIsOn] = useState(false);
-  const [isEnabled, setIsEnabled] = useState(true);
-
-  useEffect(() => {
-    if (!command) {
-      return;
-    }
-
-    function handleValueChange() {
-      if (typeof command?.value === "boolean") {
-        setIsOn(!!command.value);
-      } else {
-        setIsOn(commandValue === command?.value);
-      }
-    }
-
-    function handleIsEnabledChange() {
-      setIsEnabled(command?.isEnabled || false);
-    }
-
-    command.on("change:value", handleValueChange);
-    command.on("change:isEnabled", handleIsEnabledChange);
-
-    handleValueChange();
-    handleIsEnabledChange();
-
-    return function cleanup() {
-      command.off("change:value", handleValueChange);
-      command.off("change:isEnabled", handleIsEnabledChange);
-    };
-  }, [command]);
-
-  const classNames = ["custom-editor-button"];
-
-  if (isEnabled) {
-    classNames.push(
-      isOn
-        ? "custom-editor-button--fill bg-gray-100 text-gray-900 dark:bg-gray-600 dark:text-white"
-        : ""
-    );
-  } else {
-    classNames.push("custom-editor-button--disabled");
-  }
-
-  classNames.push(
-    "mr-2 cursor-pointer rounded p-2 text-gray-500 hover:bg-gray-100 hover:text-gray-900 dark:text-gray-400 dark:hover:bg-gray-600 dark:hover:text-white"
-  );
-
-  return (
-    <div className="border-r">
-      <button
-        className={classNames.join(" ")}
-        onClick={() => {
-          if (!editor) {
-            return;
-          }
-          if (commandValue) {
-            editor.execute(commandName, { value: commandValue });
-          } else {
-            editor.execute(commandName);
-          }
-
-          editor.editing.view.focus();
-        }}
-      >
-        <span className="sr-only">{label}</span>
-        {iconMap[commandName]}
-      </button>
-    </div>
-  );
-}
-
-// Icon map to map from the command name to the icon
-const iconMap = {
-  bold: <FaBold />,
-  italic: <FaItalic />,
-  underline: <FaUnderline />,
-  strikethrough: <FaStrikethrough />,
-  removeFormat: <FaRemoveFormat />,
-};