lexical-vue
Version:
An extensible Vue 3 web text-editor based on Lexical.
359 lines (358 loc) • 11.4 kB
JavaScript
import { computed, createElementBlock, defineComponent, mergeProps, onMounted, onUnmounted, openBlock, ref, useTemplateRef } from "vue";
function _object_without_properties(source, excluded) {
if (null == source) return {};
var target = _object_without_properties_loose(source, excluded);
var key, i;
if (Object.getOwnPropertySymbols) {
var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
for(i = 0; i < sourceSymbolKeys.length; i++){
key = sourceSymbolKeys[i];
if (!(excluded.indexOf(key) >= 0)) {
if (Object.prototype.propertyIsEnumerable.call(source, key)) target[key] = source[key];
}
}
}
return target;
}
function _object_without_properties_loose(source, excluded) {
if (null == source) return {};
var target = {};
var sourceKeys = Object.keys(source);
var key, i;
for(i = 0; i < sourceKeys.length; i++){
key = sourceKeys[i];
if (!(excluded.indexOf(key) >= 0)) target[key] = source[key];
}
return target;
}
const ContentEditableElement = (()=>{
const _hoisted_1 = [
"aria-activedescendant",
"aria-autocomplete",
"aria-controls",
"aria-describedby",
"aria-expanded",
"aria-label",
"aria-labelledby",
"aria-multiline",
"aria-owns",
"aria-readonly",
"aria-required",
"autocapitalize",
"contenteditable",
"role",
"spellcheck",
"tabindex"
];
const __vine = defineComponent({
name: 'ContentEditableElement',
props: {
editor: {
required: true
},
ariaActiveDescendant: {},
ariaAutoComplete: {},
ariaControls: {},
ariaDescribedBy: {},
ariaErrorMessage: {},
ariaExpanded: {
type: Boolean
},
ariaInvalid: {
type: Boolean
},
ariaLabel: {},
ariaLabelledBy: {},
ariaMultiline: {
type: Boolean
},
ariaOwns: {},
ariaRequired: {
type: Boolean
},
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': {}
},
setup (__props, param) {
let { expose: __expose } = param;
__expose();
const props = __props;
const root = useTemplateRef('root');
const isEditable = ref(props.editor.isEditable());
const otherAttrs = computed(()=>{
const { editor: _ } = props, rest = _object_without_properties(props, [
"editor"
]);
return rest;
});
onMounted(()=>{
function handleRef(rootElement) {
if (rootElement && rootElement.ownerDocument && rootElement.ownerDocument.defaultView) props.editor.setRootElement(rootElement);
else props.editor.setRootElement(null);
}
handleRef(root.value);
isEditable.value = props.editor.isEditable();
const unregister = props.editor.registerEditableListener((currentIsEditable)=>{
isEditable.value = currentIsEditable;
});
onUnmounted(unregister);
});
const roleWithDefault = computed(()=>{
var _props_role;
return null != (_props_role = props.role) ? _props_role : 'textbox';
});
return (_ctx, _cache)=>(openBlock(), createElementBlock("div", mergeProps({
ref_key: "root",
ref: root
}, otherAttrs.value, {
"aria-activedescendant": isEditable.value ? _ctx.ariaActiveDescendant : void 0,
"aria-autocomplete": isEditable.value ? _ctx.ariaAutoComplete : 'none',
"aria-controls": isEditable.value ? _ctx.ariaControls : void 0,
"aria-describedby": _ctx.ariaDescribedBy,
"aria-expanded": isEditable.value && 'combobox' === roleWithDefault.value ? !!_ctx.ariaExpanded : void 0,
"aria-label": _ctx.ariaLabel,
"aria-labelledby": _ctx.ariaLabelledBy,
"aria-multiline": _ctx.ariaMultiline,
"aria-owns": isEditable.value ? _ctx.ariaOwns : void 0,
"aria-readonly": isEditable.value ? void 0 : true,
"aria-required": _ctx.ariaRequired,
autocapitalize: _ctx.autocapitalize,
contenteditable: isEditable.value,
role: isEditable.value ? roleWithDefault.value : void 0,
spellcheck: _ctx.spellcheck || true,
tabindex: _ctx.tabindex
}), null, 16, _hoisted_1));
}
});
__vine.__vue_vine = true;
return __vine;
})();
export { ContentEditableElement };