|
@@ -1,5 +1,4 @@
|
|
|
import { useEditor } from "@/modules/editor";
|
|
|
-import { DesignComp } from "@/modules/editor/objects/DesignTemp/DesignComp";
|
|
|
import { Alignment } from "@ckeditor/ckeditor5-alignment";
|
|
|
import { Bold, Italic } from "@ckeditor/ckeditor5-basic-styles";
|
|
|
import { InlineEditor } from "@ckeditor/ckeditor5-editor-inline";
|
|
@@ -8,17 +7,18 @@ import { FontColor, FontFamily, FontSize } from "@ckeditor/ckeditor5-font";
|
|
|
import { Link } from "@ckeditor/ckeditor5-link";
|
|
|
import { Paragraph } from "@ckeditor/ckeditor5-paragraph";
|
|
|
import { css } from "@linaria/core";
|
|
|
-import { defineComponent, onUnmounted, watchEffect } from "vue";
|
|
|
+import { defineComponent, onUnmounted, watch, watchEffect } from "vue";
|
|
|
import { string } from "vue-types";
|
|
|
import { useCompData } from ".";
|
|
|
import { View } from "../View";
|
|
|
+
|
|
|
export const Component = defineComponent({
|
|
|
props: {
|
|
|
compId: string().def(""),
|
|
|
},
|
|
|
setup(props) {
|
|
|
const comp = useCompData(props.compId);
|
|
|
- const { store, helper, actions, controls } = useEditor();
|
|
|
+ const { store, actions } = useEditor();
|
|
|
const config = {
|
|
|
language: "zh-cn",
|
|
|
plugins: [
|
|
@@ -54,11 +54,14 @@ export const Component = defineComponent({
|
|
|
|
|
|
let editorInstance: InlineEditor;
|
|
|
|
|
|
- watchEffect(() => {
|
|
|
- if (!store.textEditingState) {
|
|
|
- editorInstance?.setData(comp.value);
|
|
|
+ watch(
|
|
|
+ () => comp.value,
|
|
|
+ () => {
|
|
|
+ if (!store.textEditingState) {
|
|
|
+ editorInstance?.setData(comp.value);
|
|
|
+ }
|
|
|
}
|
|
|
- });
|
|
|
+ );
|
|
|
|
|
|
let blurCanceler: any = null;
|
|
|
watchEffect(() => {
|
|
@@ -82,7 +85,7 @@ export const Component = defineComponent({
|
|
|
return;
|
|
|
}
|
|
|
store.setTextEditingState(false);
|
|
|
- controls.historyCtrl.history.submit();
|
|
|
+ actions.submitUpdate();
|
|
|
}
|
|
|
document.addEventListener("mousedown", blur, {
|
|
|
capture: true,
|
|
@@ -103,12 +106,10 @@ export const Component = defineComponent({
|
|
|
onFocus={() => {
|
|
|
store.setTextEditingState(true);
|
|
|
}}
|
|
|
- onInput={(e: any) => {
|
|
|
- actions.setTextarea(
|
|
|
- helper.findComp(props.compId) as DesignComp,
|
|
|
- "value",
|
|
|
- e
|
|
|
- );
|
|
|
+ onInput={(value: any) => {
|
|
|
+ if (editorInstance && comp.value !== value) {
|
|
|
+ actions.updateCompData(comp, "value", value);
|
|
|
+ }
|
|
|
}}
|
|
|
onReady={(editor: InlineEditor) => {
|
|
|
editorInstance = editor;
|