lexical-vue
Version:
An extensible Vue 3 web text-editor based on Lexical.
83 lines (82 loc) • 4.05 kB
JavaScript
import { createBlock, defineComponent, onMounted, onUnmounted, openBlock, ref, unref, useTemplateRef, watchEffect } from "vue";
import { mergeRegister } from "@lexical/utils";
import { generateContent } from "./shared/generateContent.vine.js";
import { TreeViewCore } from "./shared/TreeViewCore.vine.js";
import { useLexicalCommandsLog } from "./shared/useLexicalCommandsLog.js";
const TreeView = (()=>{
const __vine = defineComponent({
name: 'TreeView',
props: {
editor: {
required: true
},
treeTypeButtonClassName: {},
timeTravelButtonClassName: {},
timeTravelPanelButtonClassName: {},
timeTravelPanelClassName: {},
timeTravelPanelSliderClassName: {},
viewClassName: {},
customPrintNode: {}
},
setup (__props, param) {
let { expose: __expose } = param;
__expose();
const props = __props;
const treeElementRef = useTemplateRef('treeViewCore');
const editorCurrentState = ref(props.editor.getEditorState());
const commandsLog = useLexicalCommandsLog(props.editor);
onMounted(()=>{
const unregister = mergeRegister(props.editor.registerUpdateListener((param)=>{
let { editorState } = param;
editorCurrentState.value = editorState;
}), props.editor.registerEditableListener(()=>{
editorCurrentState.value = props.editor.getEditorState();
}));
onUnmounted(unregister);
});
watchEffect((onInvalidate)=>{
var _treeElementRef_value;
const element = null == (_treeElementRef_value = treeElementRef.value) ? void 0 : _treeElementRef_value.preRef;
if (element) {
element.__lexicalEditor = props.editor;
onInvalidate(()=>{
element.__lexicalEditor = null;
});
}
});
function handleEditorReadOnly(isReadonly) {
const rootElement = props.editor.getRootElement();
if (null == rootElement) return;
rootElement.contentEditable = isReadonly ? 'false' : 'true';
}
return (_ctx, _cache)=>(openBlock(), createBlock(unref(TreeViewCore), {
ref: "treeViewCore",
"tree-type-button-class-name": __props.treeTypeButtonClassName,
"time-travel-button-class-name": __props.timeTravelButtonClassName,
"time-travel-panel-slider-class-name": __props.timeTravelPanelSliderClassName,
"time-travel-panel-button-class-name": __props.timeTravelPanelButtonClassName,
"view-class-name": __props.viewClassName,
"time-travel-panel-class-name": __props.timeTravelPanelClassName,
"set-editor-read-only": handleEditorReadOnly,
"editor-state": editorCurrentState.value,
"set-editor-state": (state)=>__props.editor.setEditorState(state),
"generate-content": async (exportDOM)=>unref(generateContent)(__props.editor, unref(commandsLog), exportDOM, __props.customPrintNode),
"commands-log": unref(commandsLog)
}, null, 8, [
"tree-type-button-class-name",
"time-travel-button-class-name",
"time-travel-panel-slider-class-name",
"time-travel-panel-button-class-name",
"view-class-name",
"time-travel-panel-class-name",
"editor-state",
"set-editor-state",
"generate-content",
"commands-log"
]));
}
});
__vine.__vue_vine = true;
return __vine;
})();
export { TreeView };