(function(global, factory) { typeof exports === "object" && typeof module !== "undefined" ? factory(exports, require("vue"), require("lodash-es"), require("@ckeditor/ckeditor5-integrations-common")) : typeof define === "function" && define.amd ? define(["exports", "vue", "lodash-es", "@ckeditor/ckeditor5-integrations-common"], factory) : (global = typeof globalThis !== "undefined" ? globalThis : global || self, factory(global.CKEDITOR_VUE = {}, global.Vue, global._, global.CKEDITOR_INTEGRATIONS_COMMON)); })(this, function(exports2, Vue, lodashEs, ckeditor5IntegrationsCommon) { "use strict"; function _interopNamespaceDefault(e) { const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } }); if (e) { for (const k in e) { if (k !== "default") { const d = Object.getOwnPropertyDescriptor(e, k); Object.defineProperty(n, k, d.get ? d : { enumerable: true, get: () => e[k] }); } } } n.default = e; return Object.freeze(n); } const Vue__namespace = /* @__PURE__ */ _interopNamespaceDefault(Vue); /** * @license Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md. */ const VueIntegrationUsageDataPlugin = ckeditor5IntegrationsCommon.createIntegrationUsageDataPlugin( "vue", { version: "7.3.0", frameworkVersion: Vue.version } ); /** * @license Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md. */ function appendAllIntegrationPluginsToConfig(editorConfig) { if (ckeditor5IntegrationsCommon.isCKEditorFreeLicense(editorConfig.licenseKey)) { return editorConfig; } return ckeditor5IntegrationsCommon.appendExtraPluginsToEditorConfig(editorConfig, [ /** * This part of the code is not executed in open-source implementations using a GPL key. * It only runs when a specific license key is provided. If you are uncertain whether * this applies to your installation, please contact our support team. */ VueIntegrationUsageDataPlugin ]); } const VUE_INTEGRATION_READ_ONLY_LOCK_ID = "Lock from Vue integration (@ckeditor/ckeditor5-vue)"; const INPUT_EVENT_DEBOUNCE_WAIT = 300; const _sfc_main = /* @__PURE__ */ Vue.defineComponent({ ...{ name: "CKEditor" }, __name: "ckeditor", props: /* @__PURE__ */ Vue.mergeModels({ editor: {}, config: { default: () => ({}) }, tagName: { default: "div" }, disabled: { type: Boolean, default: false }, disableTwoWayDataBinding: { type: Boolean, default: false } }, { "modelValue": { type: String, default: "" }, "modelModifiers": {} }), emits: /* @__PURE__ */ Vue.mergeModels(["ready", "destroy", "blur", "focus", "input", "update:modelValue"], ["update:modelValue"]), setup(__props, { expose: __expose, emit: __emit }) { const model = Vue.useModel(__props, "modelValue"); const props = __props; const emit = __emit; const element = Vue.ref(); const instance = Vue.ref(); const lastEditorData = Vue.ref(); __expose({ instance, lastEditorData }); Vue.watch(model, (newModel) => { if (instance.value && newModel !== lastEditorData.value) { instance.value.data.set(newModel); } }); Vue.watch(() => props.disabled, (readOnlyMode) => { if (readOnlyMode) { instance.value.enableReadOnlyMode(VUE_INTEGRATION_READ_ONLY_LOCK_ID); } else { instance.value.disableReadOnlyMode(VUE_INTEGRATION_READ_ONLY_LOCK_ID); } }); function checkVersion() { const version = window.CKEDITOR_VERSION; if (!version) { return console.warn('Cannot find the "CKEDITOR_VERSION" in the "window" scope.'); } const [major] = version.split(".").map(Number); if (major >= 42 || version.startsWith("0.0.0")) { return; } console.warn("The component requires using CKEditor 5 in version 42+ or nightly build."); } function setUpEditorEvents(editor) { const emitDebouncedInputEvent = lodashEs.debounce((evt) => { if (props.disableTwoWayDataBinding) { return; } const data = lastEditorData.value = editor.data.get(); emit("update:modelValue", data, evt, editor); emit("input", data, evt, editor); }, INPUT_EVENT_DEBOUNCE_WAIT, { leading: true }); editor.model.document.on("change:data", emitDebouncedInputEvent); editor.editing.view.document.on("focus", (evt) => { emit("focus", evt, editor); }); editor.editing.view.document.on("blur", (evt) => { emit("blur", evt, editor); }); } checkVersion(); Vue.onMounted(() => { const editorConfig = appendAllIntegrationPluginsToConfig( Object.assign({}, props.config) ); if (model.value) { editorConfig.initialData = model.value; } props.editor.create(element.value, editorConfig).then((editor) => { instance.value = Vue.markRaw(editor); setUpEditorEvents(editor); if (model.value !== editorConfig.initialData) { editor.data.set(model.value); } if (props.disabled) { editor.enableReadOnlyMode(VUE_INTEGRATION_READ_ONLY_LOCK_ID); } emit("ready", editor); }).catch((error) => { console.error(error); }); }); Vue.onBeforeUnmount(() => { if (instance.value) { instance.value.destroy(); instance.value = void 0; } emit("destroy"); }); return (_ctx, _cache) => { return Vue.openBlock(), Vue.createBlock(Vue.resolveDynamicComponent(_ctx.tagName), { ref_key: "element", ref: element }, null, 512); }; } }); /** * @license Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md. */ const useAsync = (asyncFunc) => { const lastQueryUUID = Vue.ref(null); const error = Vue.ref(null); const data = Vue.ref(null); const loading = Vue.computed(() => lastQueryUUID.value !== null); Vue.watchEffect(async () => { const currentQueryUID = ckeditor5IntegrationsCommon.uid(); lastQueryUUID.value = currentQueryUID; data.value = null; error.value = null; const shouldDiscardQuery = () => lastQueryUUID.value !== currentQueryUID; try { const result = await asyncFunc(); if (!shouldDiscardQuery()) { data.value = result; } } catch (err) { if (!shouldDiscardQuery()) { error.value = err; } } finally { if (!shouldDiscardQuery()) { lastQueryUUID.value = null; } } }); return { loading: Vue.shallowReadonly(loading), data: Vue.shallowReadonly(data), error: Vue.shallowReadonly(error) }; }; /** * @license Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md. */ function useCKEditorCloud(config) { return useAsync( () => ckeditor5IntegrationsCommon.loadCKEditorCloud( Vue.toValue(config) ) ); } /** * @license Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md. */ /* istanbul ignore if -- @preserve */ if (!Vue__namespace.version || !Vue__namespace.version.startsWith("3.")) { throw new Error( "The CKEditor plugin works only with Vue 3+. For more information, please refer to https://ckeditor.com/docs/ckeditor5/latest/builds/guides/integration/frameworks/vuejs-v3.html" ); } const CkeditorPlugin = { /** * Installs the plugin, registering the `` component. * * @param app The application instance. */ install(app) { app.component("Ckeditor", _sfc_main); } }; Object.defineProperty(exports2, "loadCKEditorCloud", { enumerable: true, get: () => ckeditor5IntegrationsCommon.loadCKEditorCloud }); exports2.Ckeditor = _sfc_main; exports2.CkeditorPlugin = CkeditorPlugin; exports2.useCKEditorCloud = useCKEditorCloud; Object.defineProperty(exports2, Symbol.toStringTag, { value: "Module" }); }); //# sourceMappingURL=ckeditor.umd.cjs.map