lexical-vue
Version:
An extensible Vue 3 web text-editor based on Lexical.
341 lines (340 loc) • 10.8 kB
JavaScript
import { Fragment, createCommentVNode, createElementBlock, createVNode, defineComponent, mergeProps, onMounted, onUnmounted, openBlock, ref, renderSlot, unref } from "vue";
import { useLexicalComposer } from "./LexicalComposer.vine.js";
import { ContentEditableElement } from "./shared/LexicalContentEditableElement.vine.js";
import { useCanShowPlaceholder } from "./shared/useCanShowPlaceholder.js";
function _define_property(obj, key, value) {
if (key in obj) Object.defineProperty(obj, key, {
value: value,
enumerable: true,
configurable: true,
writable: true
});
else obj[key] = value;
return obj;
}
function _object_spread(target) {
for(var i = 1; i < arguments.length; i++){
var source = null != arguments[i] ? arguments[i] : {};
var ownKeys = Object.keys(source);
if ("function" == typeof Object.getOwnPropertySymbols) ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
return Object.getOwnPropertyDescriptor(source, sym).enumerable;
}));
ownKeys.forEach(function(key) {
_define_property(target, key, source[key]);
});
}
return target;
}
function LexicalContentEditable_vine_ownKeys(object, enumerableOnly) {
var keys = Object.keys(object);
if (Object.getOwnPropertySymbols) {
var symbols = Object.getOwnPropertySymbols(object);
if (enumerableOnly) symbols = symbols.filter(function(sym) {
return Object.getOwnPropertyDescriptor(object, sym).enumerable;
});
keys.push.apply(keys, symbols);
}
return keys;
}
function _object_spread_props(target, source) {
source = null != source ? source : {};
if (Object.getOwnPropertyDescriptors) Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
else LexicalContentEditable_vine_ownKeys(Object(source)).forEach(function(key) {
Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
});
return target;
}
const ContentEditable = (()=>{
const _hoisted_1 = {
key: 0,
"aria-hidden": "true"
};
const __vine = defineComponent({
name: 'ContentEditable',
props: {
onCopy: {},
onCut: {},
onPaste: {},
onCompositionend: {},
onCompositionstart: {},
onCompositionupdate: {},
onDrag: {},
onDragend: {},
onDragenter: {},
onDragexit: {},
onDragleave: {},
onDragover: {},
onDragstart: {},
onDrop: {},
onFocus: {},
onFocusin: {},
onFocusout: {},
onBlur: {},
onChange: {},
onBeforeinput: {},
onFormdata: {},
onInput: {},
onReset: {},
onSubmit: {},
onInvalid: {},
onFullscreenchange: {},
onFullscreenerror: {},
onLoad: {},
onError: {},
onKeydown: {},
onKeypress: {},
onKeyup: {},
onDblclick: {},
onMousedown: {},
onMouseenter: {},
onMouseleave: {},
onMousemove: {},
onMouseout: {},
onMouseover: {},
onMouseup: {},
onAbort: {},
onCanplay: {},
onCanplaythrough: {},
onDurationchange: {},
onEmptied: {},
onEncrypted: {},
onEnded: {},
onLoadeddata: {},
onLoadedmetadata: {},
onLoadstart: {},
onPause: {},
onPlay: {},
onPlaying: {},
onProgress: {},
onRatechange: {},
onSeeked: {},
onSeeking: {},
onStalled: {},
onSuspend: {},
onTimeupdate: {},
onVolumechange: {},
onWaiting: {},
onSelect: {},
onScroll: {},
onScrollend: {},
onTouchcancel: {},
onTouchend: {},
onTouchmove: {},
onTouchstart: {},
onAuxclick: {},
onClick: {},
onContextmenu: {},
onGotpointercapture: {},
onLostpointercapture: {},
onPointerdown: {},
onPointermove: {},
onPointerup: {},
onPointercancel: {},
onPointerenter: {},
onPointerleave: {},
onPointerover: {},
onPointerout: {},
onBeforetoggle: {},
onToggle: {},
onWheel: {},
onAnimationcancel: {},
onAnimationstart: {},
onAnimationend: {},
onAnimationiteration: {},
onSecuritypolicyviolation: {},
onTransitioncancel: {},
onTransitionend: {},
onTransitionrun: {},
onTransitionstart: {},
innerHTML: {},
class: {},
style: {
type: Boolean
},
accesskey: {},
contenteditable: {
type: Boolean
},
contextmenu: {},
dir: {},
draggable: {
type: Boolean
},
hidden: {
type: Boolean
},
id: {},
inert: {
type: Boolean
},
lang: {},
spellcheck: {
type: Boolean
},
tabindex: {},
title: {},
translate: {},
radiogroup: {},
role: {},
about: {},
datatype: {},
inlist: {},
prefix: {},
property: {},
resource: {},
typeof: {},
vocab: {},
autocapitalize: {},
autocorrect: {},
autosave: {},
color: {},
itemprop: {},
itemscope: {
type: Boolean
},
itemtype: {},
itemid: {},
itemref: {},
results: {},
security: {},
unselectable: {},
inputmode: {},
is: {},
'aria-activedescendant': {},
'aria-atomic': {
type: Boolean
},
'aria-autocomplete': {},
'aria-busy': {
type: Boolean
},
'aria-checked': {
type: Boolean
},
'aria-colcount': {},
'aria-colindex': {},
'aria-colspan': {},
'aria-controls': {},
'aria-current': {
type: Boolean
},
'aria-describedby': {},
'aria-details': {},
'aria-disabled': {
type: Boolean
},
'aria-dropeffect': {},
'aria-errormessage': {},
'aria-expanded': {
type: Boolean
},
'aria-flowto': {},
'aria-grabbed': {
type: Boolean
},
'aria-haspopup': {
type: Boolean
},
'aria-hidden': {
type: Boolean
},
'aria-invalid': {
type: Boolean
},
'aria-keyshortcuts': {},
'aria-label': {},
'aria-labelledby': {},
'aria-level': {},
'aria-live': {},
'aria-modal': {
type: Boolean
},
'aria-multiline': {
type: Boolean
},
'aria-multiselectable': {
type: Boolean
},
'aria-orientation': {},
'aria-owns': {},
'aria-placeholder': {},
'aria-posinset': {},
'aria-pressed': {
type: Boolean
},
'aria-readonly': {
type: Boolean
},
'aria-relevant': {},
'aria-required': {
type: Boolean
},
"aria-roledescription": {},
'aria-rowcount': {},
'aria-rowindex': {},
'aria-rowspan': {},
'aria-selected': {
type: Boolean
},
'aria-setsize': {},
'aria-sort': {},
'aria-valuemax': {},
'aria-valuemin': {},
'aria-valuenow': {},
'aria-valuetext': {},
ariaActiveDescendant: {},
ariaAutoComplete: {},
ariaControls: {},
ariaDescribedBy: {},
ariaErrorMessage: {},
ariaExpanded: {
type: Boolean
},
ariaInvalid: {
type: Boolean
},
ariaLabel: {},
ariaLabelledBy: {},
ariaMultiline: {
type: Boolean
},
ariaOwns: {},
ariaRequired: {
type: Boolean
}
},
setup (__props, param) {
let { expose: __expose } = param;
__expose();
const editor = useLexicalComposer();
const isEditable = ref(false);
const showPlaceholder = useCanShowPlaceholder(editor);
onMounted(()=>{
isEditable.value = editor.isEditable();
const unregister = editor.registerEditableListener((currentIsEditable)=>{
isEditable.value = currentIsEditable;
});
onUnmounted(unregister);
});
return (_ctx, _cache)=>{
var _ctx_role, _ctx_spellcheck;
return openBlock(), createElementBlock(Fragment, null, [
createVNode(unref(ContentEditableElement), mergeProps({
editor: unref(editor)
}, _object_spread_props(_object_spread({}, _ctx.$props), {
role: null != (_ctx_role = _ctx.role) ? _ctx_role : 'textbox',
spellcheck: null != (_ctx_spellcheck = _ctx.spellcheck) ? _ctx_spellcheck : true
})), null, 16, [
"editor"
]),
unref(showPlaceholder) ? (openBlock(), createElementBlock("div", _hoisted_1, [
renderSlot(_ctx.$slots, "placeholder")
])) : createCommentVNode("", true)
], 64);
};
}
});
__vine.__vue_vine = true;
return __vine;
})();
export { ContentEditable };