queenshow/src/modules/editor/components/CompUI/basicUI/Text/component2.tsx

import { useEditor } from "@/modules/editor";
import HeadlessEditor from "./EditorCustom";
import { css } from "@linaria/core";
import { nextTick } from "process";
import { defineComponent, onMounted, onUnmounted, reactive, ref } from "vue";
import { string } from "vue-types";
import { useCompData } from ".";
import { View } from "../View";
import { before } from "lodash";

export const Component = defineComponent({
  props: {
    compId: string().def(""),
  },
  setup(props) {
    const comp = useCompData(props.compId);
    const { store, actions } = useEditor();

    const state = reactive({
      editableId: "",
    });

    if (store.isEditMode) {
      actions.on("textFocus", function (compId, focus) {
        if (compId != props.compId) return;
        if (focus) {
          state.editableId = "" + Date.now();
          return;
        }
        state.editableId = "";
      });
    }

    return () => (
      <View
        class={[textStyle]}
        compId={props.compId}
        onDblclick={() => {
          if (store.isEditMode) {
            state.editableId = "" + Date.now();
          }
        }}
      >
        {state.editableId ? (
          <EditorComp
            compId={props.compId}
            key={state.editableId}
            onLost={() => {
              state.editableId = "";
            }}
          />
        ) : (
          <div
            innerHTML={comp.value}
            class={[textStyle, store.isEditMode && `pointer-events-none`]}
          />
        )}
      </View>
    );
  },
});

const EditorComp = defineComponent({
  props: {
    compId: string().isRequired,
  },
  emits: ["lost"],

  setup(props, { emit }) {
    let editorRefVal = ref<HeadlessEditor>().value;
    const comp = useCompData(props.compId);
    const { store, actions, helper, controls } = useEditor();

    let blurCanceler: any = null;

    onUnmounted(() => {
      blurCanceler?.();
    });
    const preHeight = ref<number>(0);
    const initHeight = () => {
      const dom: HTMLElement | null = document.querySelector(
        `#editor_${props.compId}`
      );
      if (!dom) {
        return false;
      }
      const h = helper.pxToDesignSize(dom.clientHeight);
      const isChange = Math.abs(preHeight.value - h) > 1;
      preHeight.value = h;
      actions.updateCompData(comp, "layout.size.1", preHeight.value);
      helper.extendStreamCard(store.currStreamCardId);
      if (isChange) {
        actions.selectObjs([]);
        setTimeout(() => {
          actions.selectObjs([props.compId]);
        }, 0);
      }
    };
    function isInCkBodyWrapper(dom: HTMLElement) {

      const out = {in: false, stop: true};

      if (editorRefVal) {
        const in1 =
          editorRefVal.ui.view.toolbar.element?.contains(dom) ||
          editorRefVal.ui.view.editable.element?.contains(dom);
        if (in1)  {
          out.in = true;
          return out;
        }

        const toolbarWrapper = document.querySelector("#text_toolbar");
        if (toolbarWrapper === dom || toolbarWrapper?.contains(dom)) {
          out.in = true;
          out.stop = false;
          return out;
        }
      }

      let n = 0;
      let curr:any = dom;
      do {
        if (curr.id == "toptoolbar") {
          out.in = true;
          return out;
        };
        curr = curr.parentElement;
        n +=1;
        if (n > 10) break;
      }while(curr)
      return out;
    }

    function blurHandle() {
      function blur(e: MouseEvent) {
        const target = e.target as HTMLElement;

        if (!editorRefVal) return;
        const test = isInCkBodyWrapper(target)
        if (test.in) {
          if (test.stop) {
            e.stopPropagation();
          }
          return;
        }
        actions.submitUpdate();
        emit("lost");
      }

      document.addEventListener("mousedown", blur, {
        capture: true,
      });
      return () => {
        document.removeEventListener("mousedown", blur, { capture: true });
      };
    }
    const initEditor = async () => {
      const dom: HTMLElement | null = document.querySelector(
        `#editor_${props.compId}`
      );
      if (!dom) {
        return;
      }
      editorRefVal = await HeadlessEditor.create(dom);
      editorRefVal.setData(comp.value);
      editorRefVal.focus();
      const range = document.createRange();
      range.selectNodeContents(dom);
      const selection = window.getSelection();
      selection?.removeAllRanges();
      selection?.addRange(range);

      editorRefVal.model.document.on("change:data", () => {
        const value = editorRefVal?.getData();
        if (comp.value !== value) {
          actions.updateCompData(comp, "value", value);
          nextTick(() => {
            const element = editorRefVal?.ui.view.editable.element || null;
            if (!element) {
              return;
            }
            const h = helper.pxToDesignSize(element.clientHeight);
            const isChange = Math.abs(preHeight.value - h) > 1;
            preHeight.value = h;
            actions.updateCompDatas(
              comp,
              ["value", "layout.size.1"],
              [value, preHeight.value]
            );
            helper.extendStreamCard(store.currStreamCardId);
            if (isChange) {
              console.log("changing=>", isChange);
              actions.selectObjs([]);
              setTimeout(() => {
                actions.selectObjs([props.compId]);
              }, 0);
            }
          });
        }
      });
      controls.textEditor = editorRefVal;
    };

    onMounted(() => {
      initEditor();
      blurCanceler = blurHandle();
      nextTick(() => {
        initHeight();
      });
    });
    return () => {
      return <div class={textStyle} id={`editor_${props.compId}`}></div>;
    };

    // return () => (

    //   <ckeditor
    //     class={textStyle}
    //     ref={inputRef}
    //     editor={InlineEditor}
    //     onInput={(value: any) => {
    //       if (editorInstance.value && comp.value !== value) {
    //         actions.updateCompData(comp, "value", value);
    //         nextTick(() => {
    //           const h = helper.pxToDesignSize(inputRef.value?.$el.clientHeight);
    //           const isChange = Math.abs(preHeight.value - h) > 1;
    //           preHeight.value = h;
    //           actions.updateCompDatas(
    //             comp,
    //             ["value", "layout.size.1"],
    //             [value, preHeight.value]
    //           );
    //           helper.extendStreamCard(store.currStreamCardId);
    //           if (isChange) {
    //             console.log("changing=>", isChange);
    //             actions.selectObjs([]);
    //             setTimeout(() => {
    //               actions.selectObjs([props.compId]);
    //             }, 0);
    //           }
    //         });
    //       }
    //     }}
    //     onReady={(editor: InlineEditor) => {
    //       editorInstance.value = editor;
    //       console.log("editor");
    //       editor.setData(comp.value);
    //       editor.focus();
    //       const range = document.createRange();
    //       range.selectNodeContents(inputRef.value.$el);
    //       const selection = window.getSelection();
    //       selection?.removeAllRanges();
    //       selection?.addRange(range);
    //     }}
    //     config={GetConfig()}
    //   />
    // );
  },
});

const textStyle = css`
  font-size: 14px;
  width: 100%;
  color: #666;
  word-break: break-all;
  h2 {
    color: #111;
    font-size: 24px;
    font-weight: 600;
  }
  h3 {
    font-size: 18px;
    color: #333;
  }
  p {
    margin: 0;
  }

  .ck.ck-editor__editable_inline {
    cursor: text;
    overflow: hidden;
    border: none !important;

    > :last-child,
    > :first-child {
      margin-top: 0;
      margin-bottom: 0;
    }
    padding: 0 !important;
  }
`;