ckeditor5-livewire 1.2.10 → 1.3.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/hooks/editable.d.ts +17 -0
- package/dist/hooks/editable.d.ts.map +1 -1
- package/dist/hooks/editor/plugins/livewire-sync.d.ts.map +1 -1
- package/dist/hooks/hook.d.ts +14 -0
- package/dist/hooks/hook.d.ts.map +1 -1
- package/dist/index.cjs +2 -2
- package/dist/index.cjs.map +1 -1
- package/dist/index.mjs +257 -188
- package/dist/index.mjs.map +1 -1
- package/package.json +1 -1
- package/src/hooks/editable.test.ts +131 -6
- package/src/hooks/editable.ts +103 -31
- package/src/hooks/editor/plugins/livewire-sync.ts +26 -18
- package/src/hooks/hook.ts +26 -0
package/dist/index.mjs
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
class
|
|
1
|
+
class P {
|
|
2
2
|
constructor(t) {
|
|
3
3
|
this.livewireComponent = t;
|
|
4
4
|
}
|
|
@@ -6,6 +6,17 @@ class C {
|
|
|
6
6
|
* The current state of the hook.
|
|
7
7
|
*/
|
|
8
8
|
state = "mounting";
|
|
9
|
+
/**
|
|
10
|
+
* Callbacks to run before the hook is destroyed.
|
|
11
|
+
*/
|
|
12
|
+
_beforeDestroyCallbacks = [];
|
|
13
|
+
/**
|
|
14
|
+
* Registers a callback to be called before the hook is destroyed.
|
|
15
|
+
* Callbacks are called in LIFO order (last registered, first called).
|
|
16
|
+
*/
|
|
17
|
+
onBeforeDestroy(t) {
|
|
18
|
+
this._beforeDestroyCallbacks.push(t);
|
|
19
|
+
}
|
|
9
20
|
/**
|
|
10
21
|
* The canonical snapshot of the Livewire component.
|
|
11
22
|
*/
|
|
@@ -30,6 +41,15 @@ class C {
|
|
|
30
41
|
isBeingDestroyed() {
|
|
31
42
|
return ["destroyed", "destroying"].includes(this.state);
|
|
32
43
|
}
|
|
44
|
+
/**
|
|
45
|
+
* Runs all registered before-destroy callbacks and clears the list.
|
|
46
|
+
* Called internally by makeHook before destroyed().
|
|
47
|
+
*/
|
|
48
|
+
_runBeforeDestroyCallbacks() {
|
|
49
|
+
for (const t of this._beforeDestroyCallbacks.reverse())
|
|
50
|
+
t();
|
|
51
|
+
this._beforeDestroyCallbacks = [];
|
|
52
|
+
}
|
|
33
53
|
}
|
|
34
54
|
function U(i, t) {
|
|
35
55
|
const e = /* @__PURE__ */ new Map();
|
|
@@ -38,7 +58,7 @@ function U(i, t) {
|
|
|
38
58
|
return;
|
|
39
59
|
const a = new t(r);
|
|
40
60
|
e.set(r.id, a), n(async () => {
|
|
41
|
-
a.state = "destroying", await a.destroyed(), a.state = "destroyed", e.delete(r.id);
|
|
61
|
+
a.state = "destroying", a._runBeforeDestroyCallbacks(), await a.destroyed(), a.state = "destroyed", e.delete(r.id);
|
|
42
62
|
}), await a.mounted(), a.state = "mounted";
|
|
43
63
|
}), window.Livewire?.hook("commit", async ({ component: r, succeed: n }) => {
|
|
44
64
|
r.name === i && n(() => {
|
|
@@ -47,7 +67,7 @@ function U(i, t) {
|
|
|
47
67
|
});
|
|
48
68
|
});
|
|
49
69
|
}
|
|
50
|
-
class
|
|
70
|
+
class L {
|
|
51
71
|
/**
|
|
52
72
|
* Map of registered items.
|
|
53
73
|
*/
|
|
@@ -75,11 +95,11 @@ class H {
|
|
|
75
95
|
*/
|
|
76
96
|
execute(t, e, r) {
|
|
77
97
|
const n = this.items.get(t), a = this.initializationErrors.get(t);
|
|
78
|
-
return a ? (r?.(a), Promise.reject(a)) : n ? Promise.resolve(e(n)) : new Promise((
|
|
98
|
+
return a ? (r?.(a), Promise.reject(a)) : n ? Promise.resolve(e(n)) : new Promise((o, s) => {
|
|
79
99
|
const c = this.getPendingCallbacks(t);
|
|
80
100
|
c.success.push(async (u) => {
|
|
81
|
-
|
|
82
|
-
}), r ? c.error.push(r) : c.error.push(
|
|
101
|
+
o(await e(u));
|
|
102
|
+
}), r ? c.error.push(r) : c.error.push(s);
|
|
83
103
|
});
|
|
84
104
|
}
|
|
85
105
|
/**
|
|
@@ -213,7 +233,7 @@ class H {
|
|
|
213
233
|
this.items.size === 1 && t !== null && this.register(null, e);
|
|
214
234
|
}
|
|
215
235
|
}
|
|
216
|
-
function
|
|
236
|
+
function x(i, t) {
|
|
217
237
|
let e = null;
|
|
218
238
|
return (...r) => {
|
|
219
239
|
e && clearTimeout(e), e = setTimeout(() => {
|
|
@@ -221,18 +241,18 @@ function D(i, t) {
|
|
|
221
241
|
}, i);
|
|
222
242
|
};
|
|
223
243
|
}
|
|
224
|
-
function
|
|
244
|
+
function K(i, t) {
|
|
225
245
|
const e = Object.entries(i).filter(([r, n]) => t(n, r));
|
|
226
246
|
return Object.fromEntries(e);
|
|
227
247
|
}
|
|
228
|
-
function
|
|
248
|
+
function A(i) {
|
|
229
249
|
return Object.keys(i).length === 0 && i.constructor === Object;
|
|
230
250
|
}
|
|
231
251
|
function O(i, t) {
|
|
232
252
|
const e = Object.entries(i).map(([r, n]) => [r, t(n, r)]);
|
|
233
253
|
return Object.fromEntries(e);
|
|
234
254
|
}
|
|
235
|
-
function
|
|
255
|
+
function b(i, t) {
|
|
236
256
|
if (i === t)
|
|
237
257
|
return !0;
|
|
238
258
|
const e = Object.keys(i), r = Object.keys(t);
|
|
@@ -243,32 +263,32 @@ function P(i, t) {
|
|
|
243
263
|
return !1;
|
|
244
264
|
return !0;
|
|
245
265
|
}
|
|
246
|
-
function
|
|
266
|
+
function G() {
|
|
247
267
|
return Math.random().toString(36).substring(2);
|
|
248
268
|
}
|
|
249
|
-
function
|
|
269
|
+
function Y(i, {
|
|
250
270
|
timeOutAfter: t = 500,
|
|
251
271
|
retryAfter: e = 100
|
|
252
272
|
} = {}) {
|
|
253
273
|
return new Promise((r, n) => {
|
|
254
274
|
const a = Date.now();
|
|
255
|
-
let
|
|
256
|
-
const
|
|
257
|
-
n(
|
|
275
|
+
let o = null;
|
|
276
|
+
const s = setTimeout(() => {
|
|
277
|
+
n(o ?? new Error("Timeout"));
|
|
258
278
|
}, t), c = async () => {
|
|
259
279
|
try {
|
|
260
280
|
const u = await i();
|
|
261
|
-
clearTimeout(
|
|
281
|
+
clearTimeout(s), r(u);
|
|
262
282
|
} catch (u) {
|
|
263
|
-
|
|
283
|
+
o = u, Date.now() - a > t ? n(u) : setTimeout(c, e);
|
|
264
284
|
}
|
|
265
285
|
};
|
|
266
286
|
c();
|
|
267
287
|
});
|
|
268
288
|
}
|
|
269
|
-
const
|
|
270
|
-
async function
|
|
271
|
-
const n =
|
|
289
|
+
const D = Symbol.for("context-editor-watchdog");
|
|
290
|
+
async function X({ element: i, context: t, creator: e, config: r }) {
|
|
291
|
+
const n = G();
|
|
272
292
|
await t.add({
|
|
273
293
|
creator: (c, u) => e.create(c, u),
|
|
274
294
|
id: n,
|
|
@@ -276,28 +296,28 @@ async function Y({ element: i, context: t, creator: e, config: r }) {
|
|
|
276
296
|
type: "editor",
|
|
277
297
|
config: r
|
|
278
298
|
});
|
|
279
|
-
const a = t.getItem(n),
|
|
299
|
+
const a = t.getItem(n), o = {
|
|
280
300
|
state: "available",
|
|
281
301
|
editorContextId: n,
|
|
282
302
|
context: t
|
|
283
303
|
};
|
|
284
|
-
a[
|
|
285
|
-
const
|
|
286
|
-
return t.destroy = async () => (
|
|
287
|
-
...
|
|
304
|
+
a[D] = o;
|
|
305
|
+
const s = t.destroy.bind(t);
|
|
306
|
+
return t.destroy = async () => (o.state = "unavailable", s()), {
|
|
307
|
+
...o,
|
|
288
308
|
editor: a
|
|
289
309
|
};
|
|
290
310
|
}
|
|
291
|
-
function X(i) {
|
|
292
|
-
return I in i ? i[I] : null;
|
|
293
|
-
}
|
|
294
311
|
function J(i) {
|
|
312
|
+
return D in i ? i[D] : null;
|
|
313
|
+
}
|
|
314
|
+
function Q(i) {
|
|
295
315
|
return i.model.document.getRootNames().reduce((e, r) => (e[r] = i.getData({ rootName: r }), e), /* @__PURE__ */ Object.create({}));
|
|
296
316
|
}
|
|
297
|
-
function
|
|
317
|
+
function k(i) {
|
|
298
318
|
return ["inline", "classic", "balloon", "decoupled"].includes(i);
|
|
299
319
|
}
|
|
300
|
-
function
|
|
320
|
+
function F(i) {
|
|
301
321
|
let t = i;
|
|
302
322
|
for (; t; ) {
|
|
303
323
|
for (const e of t.attributes)
|
|
@@ -379,25 +399,25 @@ class S {
|
|
|
379
399
|
return this.plugins.has(t);
|
|
380
400
|
}
|
|
381
401
|
}
|
|
382
|
-
async function
|
|
402
|
+
async function W(i) {
|
|
383
403
|
const t = await import("ckeditor5");
|
|
384
404
|
let e = null;
|
|
385
405
|
const r = i.map(async (n) => {
|
|
386
406
|
const a = await S.the.get(n);
|
|
387
407
|
if (a)
|
|
388
408
|
return a;
|
|
389
|
-
const { [n]:
|
|
390
|
-
if (
|
|
391
|
-
return
|
|
409
|
+
const { [n]: o } = t;
|
|
410
|
+
if (o)
|
|
411
|
+
return o;
|
|
392
412
|
if (!e)
|
|
393
413
|
try {
|
|
394
414
|
e = await import("ckeditor5-premium-features");
|
|
395
415
|
} catch (c) {
|
|
396
416
|
console.error(`Failed to load premium package: ${c}`);
|
|
397
417
|
}
|
|
398
|
-
const { [n]:
|
|
399
|
-
if (
|
|
400
|
-
return
|
|
418
|
+
const { [n]: s } = e || {};
|
|
419
|
+
if (s)
|
|
420
|
+
return s;
|
|
401
421
|
throw new Error(`Plugin "${n}" not found in base or premium packages.`);
|
|
402
422
|
});
|
|
403
423
|
return {
|
|
@@ -723,23 +743,23 @@ async function tt(i, t) {
|
|
|
723
743
|
return console.error(`Failed to load translation for ${i}/${t}:`, e), null;
|
|
724
744
|
}
|
|
725
745
|
}
|
|
726
|
-
function
|
|
746
|
+
function B(i) {
|
|
727
747
|
return O(i, (t) => ({
|
|
728
748
|
dictionary: t
|
|
729
749
|
}));
|
|
730
750
|
}
|
|
731
|
-
function
|
|
732
|
-
const t =
|
|
751
|
+
function j(i) {
|
|
752
|
+
const t = N(i);
|
|
733
753
|
return O(t, ({ element: e }) => e);
|
|
734
754
|
}
|
|
735
|
-
function
|
|
736
|
-
const t = window.Livewire.all().filter(({ name:
|
|
737
|
-
...
|
|
738
|
-
[
|
|
755
|
+
function N(i) {
|
|
756
|
+
const t = window.Livewire.all().filter(({ name: o, canonical: s }) => o === "ckeditor5-editable" && s.editorId === i).reduce((o, { canonical: s, el: c }) => ({
|
|
757
|
+
...o,
|
|
758
|
+
[s.rootName]: {
|
|
739
759
|
element: c.querySelector("[data-cke-editable-content]"),
|
|
740
|
-
content:
|
|
760
|
+
content: s.content
|
|
741
761
|
}
|
|
742
|
-
}), /* @__PURE__ */ Object.create({})), r = window.Livewire.all().find(({ name:
|
|
762
|
+
}), /* @__PURE__ */ Object.create({})), r = window.Livewire.all().find(({ name: o, canonical: s }) => o === "ckeditor5" && s.editorId === i)?.canonical.content, n = document.querySelector(`#${i}_editor `), a = t.main;
|
|
743
763
|
return a && r?.main ? {
|
|
744
764
|
...t,
|
|
745
765
|
main: {
|
|
@@ -754,15 +774,15 @@ function q(i) {
|
|
|
754
774
|
}
|
|
755
775
|
} : t;
|
|
756
776
|
}
|
|
757
|
-
function
|
|
758
|
-
const t =
|
|
759
|
-
return
|
|
777
|
+
function z(i) {
|
|
778
|
+
const t = N(i), e = O(t, ({ content: r }) => r);
|
|
779
|
+
return K(e, (r) => typeof r == "string");
|
|
760
780
|
}
|
|
761
|
-
function
|
|
781
|
+
function I(i) {
|
|
762
782
|
if (!i || typeof i != "object")
|
|
763
783
|
return i;
|
|
764
784
|
if (Array.isArray(i))
|
|
765
|
-
return i.map((r) =>
|
|
785
|
+
return i.map((r) => I(r));
|
|
766
786
|
const t = i;
|
|
767
787
|
if (t.$element && typeof t.$element == "string") {
|
|
768
788
|
const r = document.querySelector(t.$element);
|
|
@@ -770,7 +790,7 @@ function x(i) {
|
|
|
770
790
|
}
|
|
771
791
|
const e = /* @__PURE__ */ Object.create(null);
|
|
772
792
|
for (const [r, n] of Object.entries(i))
|
|
773
|
-
e[r] =
|
|
793
|
+
e[r] = I(n);
|
|
774
794
|
return e;
|
|
775
795
|
}
|
|
776
796
|
function et(i, t) {
|
|
@@ -795,10 +815,10 @@ async function rt(i) {
|
|
|
795
815
|
function it(i) {
|
|
796
816
|
return T in i ? i[T] : null;
|
|
797
817
|
}
|
|
798
|
-
class
|
|
799
|
-
static the = new
|
|
818
|
+
class p extends L {
|
|
819
|
+
static the = new p();
|
|
800
820
|
}
|
|
801
|
-
class nt extends
|
|
821
|
+
class nt extends P {
|
|
802
822
|
/**
|
|
803
823
|
* The promise that resolves to the context instance.
|
|
804
824
|
*/
|
|
@@ -807,28 +827,28 @@ class nt extends C {
|
|
|
807
827
|
* Mounts the context component.
|
|
808
828
|
*/
|
|
809
829
|
async mounted() {
|
|
810
|
-
const { contextId: t, language: e, context: r } = this.canonical, { customTranslations: n, watchdogConfig: a, config: { plugins:
|
|
830
|
+
const { contextId: t, language: e, context: r } = this.canonical, { customTranslations: n, watchdogConfig: a, config: { plugins: o, ...s } } = r, { loadedPlugins: c, hasPremium: u } = await W(o ?? []), C = [
|
|
811
831
|
...await V(e, u),
|
|
812
|
-
|
|
813
|
-
].filter((
|
|
832
|
+
B(n || {})
|
|
833
|
+
].filter((f) => !A(f));
|
|
814
834
|
this.contextPromise = (async () => {
|
|
815
|
-
const { ContextWatchdog:
|
|
835
|
+
const { ContextWatchdog: f, Context: w } = await import("ckeditor5"), h = new f(w, {
|
|
816
836
|
crashNumberLimit: 10,
|
|
817
837
|
...a
|
|
818
838
|
});
|
|
819
|
-
return await
|
|
820
|
-
...
|
|
839
|
+
return await h.create({
|
|
840
|
+
...s,
|
|
821
841
|
language: e,
|
|
822
842
|
plugins: c,
|
|
823
|
-
...
|
|
824
|
-
translations:
|
|
843
|
+
...C.length && {
|
|
844
|
+
translations: C
|
|
825
845
|
}
|
|
826
|
-
}),
|
|
827
|
-
console.error("Context item error:", ...
|
|
828
|
-
}),
|
|
846
|
+
}), h.on("itemError", (...g) => {
|
|
847
|
+
console.error("Context item error:", ...g);
|
|
848
|
+
}), h;
|
|
829
849
|
})();
|
|
830
|
-
const
|
|
831
|
-
this.isBeingDestroyed() ||
|
|
850
|
+
const v = await this.contextPromise;
|
|
851
|
+
this.isBeingDestroyed() || p.the.register(t, v);
|
|
832
852
|
}
|
|
833
853
|
/**
|
|
834
854
|
* Destroys the context component. Unmounts root from the editor.
|
|
@@ -839,59 +859,100 @@ class nt extends C {
|
|
|
839
859
|
try {
|
|
840
860
|
await (await this.contextPromise)?.destroy();
|
|
841
861
|
} finally {
|
|
842
|
-
this.contextPromise = null,
|
|
862
|
+
this.contextPromise = null, p.the.hasItem(t) && p.the.unregister(t);
|
|
843
863
|
}
|
|
844
864
|
}
|
|
845
865
|
}
|
|
846
|
-
class
|
|
847
|
-
static the = new
|
|
866
|
+
class m extends L {
|
|
867
|
+
static the = new m();
|
|
848
868
|
}
|
|
849
|
-
class at extends
|
|
869
|
+
class at extends P {
|
|
850
870
|
/**
|
|
851
871
|
* The promise that resolves when the editable is mounted.
|
|
852
872
|
*/
|
|
853
873
|
editorPromise = null;
|
|
874
|
+
/**
|
|
875
|
+
* Pending content to apply when the editor loses focus.
|
|
876
|
+
*/
|
|
877
|
+
pendingContent = null;
|
|
854
878
|
/**
|
|
855
879
|
* Mounts the editable component.
|
|
856
880
|
*/
|
|
857
881
|
mounted() {
|
|
858
|
-
const { editorId: t, rootName: e, content: r
|
|
859
|
-
this.editorPromise =
|
|
882
|
+
const { editorId: t, rootName: e, content: r } = this.canonical;
|
|
883
|
+
this.editorPromise = m.the.execute(t, (n) => {
|
|
860
884
|
if (this.isBeingDestroyed())
|
|
861
885
|
return null;
|
|
862
|
-
const { ui:
|
|
863
|
-
if (
|
|
886
|
+
const { ui: a, editing: o, model: s } = n;
|
|
887
|
+
if (s.document.getRoot(e)) {
|
|
864
888
|
if (r !== null) {
|
|
865
|
-
const
|
|
866
|
-
|
|
889
|
+
const c = n.getData({ rootName: e });
|
|
890
|
+
c && c !== r && n.setData({
|
|
867
891
|
[e]: r
|
|
868
892
|
});
|
|
869
893
|
}
|
|
870
|
-
|
|
894
|
+
} else {
|
|
895
|
+
n.addRoot(e, {
|
|
896
|
+
isUndoable: !1,
|
|
897
|
+
...r !== null && {
|
|
898
|
+
data: r
|
|
899
|
+
}
|
|
900
|
+
});
|
|
901
|
+
const c = this.element.querySelector("[data-cke-editable-content]"), u = a.view.createEditable(e, c);
|
|
902
|
+
a.addEditable(u), o.view.forceRender();
|
|
871
903
|
}
|
|
872
|
-
|
|
873
|
-
|
|
874
|
-
|
|
875
|
-
|
|
876
|
-
|
|
877
|
-
|
|
878
|
-
|
|
879
|
-
|
|
880
|
-
const
|
|
881
|
-
|
|
882
|
-
|
|
883
|
-
|
|
884
|
-
|
|
904
|
+
return this.syncTypingContentPush(n), this.setupPendingReceivedContentHandlers(n), n;
|
|
905
|
+
});
|
|
906
|
+
}
|
|
907
|
+
/**
|
|
908
|
+
* Setups the content sync from the editor to Livewire on user input with debounce.
|
|
909
|
+
*/
|
|
910
|
+
syncTypingContentPush(t) {
|
|
911
|
+
const { rootName: e, saveDebounceMs: r } = this.canonical, n = this.element.querySelector("input"), a = () => {
|
|
912
|
+
const s = t.getData({ rootName: e });
|
|
913
|
+
n && (n.value = s), this.$wire.set("content", s);
|
|
914
|
+
}, o = x(r, a);
|
|
915
|
+
t.model.document.on("change:data", o), a(), this.onBeforeDestroy(() => {
|
|
916
|
+
t.model.document.off("change:data", o);
|
|
885
917
|
});
|
|
886
918
|
}
|
|
919
|
+
/**
|
|
920
|
+
* Sets up handlers that manage pending incoming content (clears pending
|
|
921
|
+
* content on user edits and applies pending content on blur).
|
|
922
|
+
*/
|
|
923
|
+
setupPendingReceivedContentHandlers(t) {
|
|
924
|
+
const { ui: e, model: r } = t, { focusTracker: n } = e, { rootName: a } = this.canonical, o = () => {
|
|
925
|
+
this.pendingContent = null;
|
|
926
|
+
}, s = () => {
|
|
927
|
+
!n.isFocused && this.pendingContent !== null && (t.setData({
|
|
928
|
+
[a]: this.pendingContent
|
|
929
|
+
}), this.pendingContent = null);
|
|
930
|
+
};
|
|
931
|
+
r.document.on("change:data", o), n.on("change:isFocused", s), this.onBeforeDestroy(() => {
|
|
932
|
+
r.document.off("change:data", o), n.off("change:isFocused", s);
|
|
933
|
+
});
|
|
934
|
+
}
|
|
935
|
+
/**
|
|
936
|
+
* Applies canonical content to the editor while respecting focus/pending state.
|
|
937
|
+
*/
|
|
938
|
+
applyCanonicalContentToEditor(t) {
|
|
939
|
+
if (!F(this.element))
|
|
940
|
+
return;
|
|
941
|
+
const { content: e, rootName: r } = this.canonical, { ui: n } = t;
|
|
942
|
+
if (t.getData({ rootName: r }) !== (e ?? "")) {
|
|
943
|
+
if (n.focusTracker.isFocused) {
|
|
944
|
+
this.pendingContent = e ?? "";
|
|
945
|
+
return;
|
|
946
|
+
}
|
|
947
|
+
t.setData({ [r]: e ?? "" });
|
|
948
|
+
}
|
|
949
|
+
}
|
|
887
950
|
/**
|
|
888
951
|
* Called when the component is updated by Livewire.
|
|
889
952
|
*/
|
|
890
953
|
async afterCommitSynced() {
|
|
891
|
-
const t = await this.editorPromise
|
|
892
|
-
|
|
893
|
-
[r]: e ?? ""
|
|
894
|
-
});
|
|
954
|
+
const t = await this.editorPromise;
|
|
955
|
+
this.applyCanonicalContentToEditor(t);
|
|
895
956
|
}
|
|
896
957
|
/**
|
|
897
958
|
* Destroys the editable component. Unmounts root from the editor.
|
|
@@ -906,7 +967,7 @@ class at extends C {
|
|
|
906
967
|
}
|
|
907
968
|
}
|
|
908
969
|
}
|
|
909
|
-
async function
|
|
970
|
+
async function ot({
|
|
910
971
|
saveDebounceMs: i,
|
|
911
972
|
component: t
|
|
912
973
|
}) {
|
|
@@ -922,66 +983,74 @@ async function st({
|
|
|
922
983
|
* Initializes the plugin.
|
|
923
984
|
*/
|
|
924
985
|
init() {
|
|
925
|
-
this.setupTypingContentPush(), this.setupFocusableEventPush(), this.
|
|
986
|
+
this.setupTypingContentPush(), this.setupFocusableEventPush(), this.setupAfterCommitHandler(), this.setupSetEditorContentHandler();
|
|
926
987
|
}
|
|
927
988
|
/**
|
|
928
|
-
* Setups the content
|
|
989
|
+
* Setups handler that updates the editor content after Livewire changes attributes
|
|
990
|
+
* on the component and commits the changes, but only if the editor is not focused to prevent
|
|
991
|
+
* disrupting the user while editing.
|
|
929
992
|
*/
|
|
930
|
-
|
|
931
|
-
const { editor: n } = this, { model: a, ui: { focusTracker:
|
|
932
|
-
let
|
|
993
|
+
setupAfterCommitHandler() {
|
|
994
|
+
const { editor: n } = this, { model: a, ui: { focusTracker: o } } = n;
|
|
995
|
+
let s = null;
|
|
933
996
|
n.on("afterCommitSynced", () => {
|
|
997
|
+
if (!F(t.element))
|
|
998
|
+
return;
|
|
934
999
|
const { content: c } = t.canonical, u = this.getEditorRootsValues();
|
|
935
|
-
if (
|
|
936
|
-
|
|
937
|
-
P(c, u) || (o = c);
|
|
938
|
-
return;
|
|
939
|
-
}
|
|
940
|
-
P(c, u) || n.setData(c);
|
|
941
|
-
}
|
|
942
|
-
}), Livewire.on("set-editor-content", ({ editorId: c, content: u }) => {
|
|
943
|
-
if (c !== t.canonical.editorId)
|
|
1000
|
+
if (o.isFocused) {
|
|
1001
|
+
b(c, u) || (s = c);
|
|
944
1002
|
return;
|
|
945
|
-
|
|
946
|
-
|
|
1003
|
+
}
|
|
1004
|
+
b(c, u) || n.setData(c);
|
|
947
1005
|
}), a.document.on("change:data", () => {
|
|
948
|
-
|
|
949
|
-
}),
|
|
950
|
-
!
|
|
1006
|
+
s = null;
|
|
1007
|
+
}), o.on("change:isFocused", () => {
|
|
1008
|
+
!o.isFocused && s !== null && (n.setData(s), s = null);
|
|
1009
|
+
});
|
|
1010
|
+
}
|
|
1011
|
+
/**
|
|
1012
|
+
* Setups the content sync from Livewire to the editor when Livewire emits an event.
|
|
1013
|
+
*/
|
|
1014
|
+
setupSetEditorContentHandler() {
|
|
1015
|
+
Livewire.on("set-editor-content", ({ editorId: n, content: a }) => {
|
|
1016
|
+
if (n !== t.canonical.editorId)
|
|
1017
|
+
return;
|
|
1018
|
+
const o = this.getEditorRootsValues();
|
|
1019
|
+
b(o, a) || this.editor.setData(a);
|
|
951
1020
|
});
|
|
952
1021
|
}
|
|
953
1022
|
/**
|
|
954
1023
|
* Setups the content push event for the editor.
|
|
955
1024
|
*/
|
|
956
1025
|
setupTypingContentPush() {
|
|
957
|
-
const { model: n } = this.editor, { $wire: a } = t,
|
|
958
|
-
const
|
|
959
|
-
|
|
1026
|
+
const { model: n } = this.editor, { $wire: a } = t, o = () => {
|
|
1027
|
+
const s = this.getEditorRootsValues();
|
|
1028
|
+
b(s, t.canonical.content ?? {}) || (a.set("content", s), a.dispatch("editor-content-changed", {
|
|
960
1029
|
editorId: t.canonical.editorId,
|
|
961
|
-
content:
|
|
1030
|
+
content: s
|
|
962
1031
|
}));
|
|
963
1032
|
};
|
|
964
|
-
n.document.on("change:data",
|
|
1033
|
+
n.document.on("change:data", x(i, o)), this.editor.once("ready", o);
|
|
965
1034
|
}
|
|
966
1035
|
/**
|
|
967
1036
|
* Setups the event push for the editor.
|
|
968
1037
|
*/
|
|
969
1038
|
setupFocusableEventPush() {
|
|
970
|
-
const { ui: n } = this.editor, { $wire: a } = t,
|
|
971
|
-
const
|
|
972
|
-
a.set("focused", n.focusTracker.isFocused),
|
|
1039
|
+
const { ui: n } = this.editor, { $wire: a } = t, o = () => {
|
|
1040
|
+
const s = this.getEditorRootsValues();
|
|
1041
|
+
a.set("focused", n.focusTracker.isFocused), b(s, t.canonical.content ?? {}) || a.set("content", s);
|
|
973
1042
|
};
|
|
974
|
-
n.focusTracker.on("change:isFocused",
|
|
1043
|
+
n.focusTracker.on("change:isFocused", o);
|
|
975
1044
|
}
|
|
976
1045
|
/**
|
|
977
1046
|
* Gets the current values of all editor roots.
|
|
978
1047
|
*/
|
|
979
1048
|
getEditorRootsValues() {
|
|
980
|
-
return
|
|
1049
|
+
return Q(this.editor);
|
|
981
1050
|
}
|
|
982
1051
|
};
|
|
983
1052
|
}
|
|
984
|
-
async function
|
|
1053
|
+
async function st(i) {
|
|
985
1054
|
const { Plugin: t } = await import("ckeditor5");
|
|
986
1055
|
return class extends t {
|
|
987
1056
|
/**
|
|
@@ -1003,7 +1072,7 @@ async function ot(i) {
|
|
|
1003
1072
|
*/
|
|
1004
1073
|
afterInit() {
|
|
1005
1074
|
const { editor: r } = this, a = r.sourceElement.id.replace(/_editor$/, "");
|
|
1006
|
-
this.input = document.getElementById(`${a}_input`), this.input && (r.model.document.on("change:data",
|
|
1075
|
+
this.input = document.getElementById(`${a}_input`), this.input && (r.model.document.on("change:data", x(i, () => this.sync())), r.once("ready", this.sync), this.form = this.input.closest("form"), this.form?.addEventListener("submit", this.sync));
|
|
1007
1076
|
}
|
|
1008
1077
|
/**
|
|
1009
1078
|
* Synchronizes the editor's content with the input field.
|
|
@@ -1022,7 +1091,7 @@ async function ot(i) {
|
|
|
1022
1091
|
}
|
|
1023
1092
|
};
|
|
1024
1093
|
}
|
|
1025
|
-
class ct extends
|
|
1094
|
+
class ct extends P {
|
|
1026
1095
|
/**
|
|
1027
1096
|
* The promise that resolves to the editor instance.
|
|
1028
1097
|
*/
|
|
@@ -1032,15 +1101,15 @@ class ct extends C {
|
|
|
1032
1101
|
*/
|
|
1033
1102
|
async mounted() {
|
|
1034
1103
|
const { editorId: t } = this.canonical;
|
|
1035
|
-
|
|
1104
|
+
m.the.resetErrors(t);
|
|
1036
1105
|
try {
|
|
1037
1106
|
this.editorPromise = this.createEditor();
|
|
1038
1107
|
const e = await this.editorPromise;
|
|
1039
|
-
this.isBeingDestroyed() || (
|
|
1040
|
-
|
|
1108
|
+
this.isBeingDestroyed() || (m.the.register(t, e), e.once("destroy", () => {
|
|
1109
|
+
m.the.hasItem(t) && m.the.unregister(t);
|
|
1041
1110
|
}));
|
|
1042
1111
|
} catch (e) {
|
|
1043
|
-
console.error(`Error initializing CKEditor5 instance with ID "${t}":`, e), this.editorPromise = null,
|
|
1112
|
+
console.error(`Error initializing CKEditor5 instance with ID "${t}":`, e), this.editorPromise = null, m.the.error(t, e);
|
|
1044
1113
|
}
|
|
1045
1114
|
}
|
|
1046
1115
|
/**
|
|
@@ -1053,7 +1122,7 @@ class ct extends C {
|
|
|
1053
1122
|
const t = await this.editorPromise;
|
|
1054
1123
|
if (!t)
|
|
1055
1124
|
return;
|
|
1056
|
-
const e =
|
|
1125
|
+
const e = J(t), r = it(t);
|
|
1057
1126
|
e ? e.state !== "unavailable" && await e.context.remove(e.editorContextId) : r ? await r.destroy() : await t.destroy();
|
|
1058
1127
|
} finally {
|
|
1059
1128
|
this.editorPromise = null;
|
|
@@ -1075,82 +1144,82 @@ class ct extends C {
|
|
|
1075
1144
|
contextId: r,
|
|
1076
1145
|
editableHeight: n,
|
|
1077
1146
|
saveDebounceMs: a,
|
|
1078
|
-
language:
|
|
1079
|
-
watchdog:
|
|
1147
|
+
language: o,
|
|
1148
|
+
watchdog: s,
|
|
1080
1149
|
content: c
|
|
1081
1150
|
} = this.canonical, {
|
|
1082
1151
|
customTranslations: u,
|
|
1083
|
-
editorType:
|
|
1084
|
-
licenseKey:
|
|
1085
|
-
config: { plugins:
|
|
1152
|
+
editorType: d,
|
|
1153
|
+
licenseKey: C,
|
|
1154
|
+
config: { plugins: v, ...f }
|
|
1086
1155
|
} = t;
|
|
1087
|
-
let
|
|
1088
|
-
const
|
|
1089
|
-
if (
|
|
1090
|
-
const l = await rt(
|
|
1091
|
-
({ Constructor:
|
|
1092
|
-
const
|
|
1093
|
-
this.editorPromise = Promise.resolve(
|
|
1156
|
+
let w = await Z(d);
|
|
1157
|
+
const h = await (r ? p.the.waitFor(r) : null);
|
|
1158
|
+
if (s && !h) {
|
|
1159
|
+
const l = await rt(w);
|
|
1160
|
+
({ Constructor: w } = l), l.watchdog.on("restart", () => {
|
|
1161
|
+
const E = l.watchdog.editor;
|
|
1162
|
+
this.editorPromise = Promise.resolve(E), m.the.register(e, E);
|
|
1094
1163
|
});
|
|
1095
1164
|
}
|
|
1096
|
-
const { loadedPlugins:
|
|
1097
|
-
|
|
1098
|
-
await
|
|
1165
|
+
const { loadedPlugins: g, hasPremium: _ } = await W(v);
|
|
1166
|
+
g.push(
|
|
1167
|
+
await ot(
|
|
1099
1168
|
{
|
|
1100
1169
|
saveDebounceMs: a,
|
|
1101
1170
|
component: this
|
|
1102
1171
|
}
|
|
1103
1172
|
)
|
|
1104
|
-
),
|
|
1105
|
-
await
|
|
1173
|
+
), k(d) && g.push(
|
|
1174
|
+
await st(a)
|
|
1106
1175
|
);
|
|
1107
1176
|
const $ = [
|
|
1108
|
-
...await V(
|
|
1109
|
-
|
|
1110
|
-
].filter((l) => !
|
|
1111
|
-
let
|
|
1177
|
+
...await V(o, _),
|
|
1178
|
+
B(u || {})
|
|
1179
|
+
].filter((l) => !A(l));
|
|
1180
|
+
let y = {
|
|
1112
1181
|
...c,
|
|
1113
|
-
...
|
|
1182
|
+
...z(e)
|
|
1114
1183
|
};
|
|
1115
|
-
|
|
1116
|
-
const
|
|
1117
|
-
let l =
|
|
1184
|
+
k(d) && (y = y.main || "");
|
|
1185
|
+
const H = await (async () => {
|
|
1186
|
+
let l = j(e);
|
|
1118
1187
|
if (!(l instanceof HTMLElement) && !("main" in l)) {
|
|
1119
|
-
const
|
|
1120
|
-
|
|
1188
|
+
const M = d === "decoupled" ? ["main"] : Object.keys(y);
|
|
1189
|
+
q(l, M) || (l = await ut(e, M), y = {
|
|
1121
1190
|
...c,
|
|
1122
|
-
...
|
|
1191
|
+
...z(e)
|
|
1123
1192
|
});
|
|
1124
1193
|
}
|
|
1125
|
-
|
|
1126
|
-
const
|
|
1127
|
-
...
|
|
1128
|
-
initialData:
|
|
1129
|
-
licenseKey:
|
|
1130
|
-
plugins:
|
|
1131
|
-
language:
|
|
1194
|
+
k(d) && "main" in l && (l = l.main);
|
|
1195
|
+
const E = {
|
|
1196
|
+
...I(f),
|
|
1197
|
+
initialData: y,
|
|
1198
|
+
licenseKey: C,
|
|
1199
|
+
plugins: g,
|
|
1200
|
+
language: o,
|
|
1132
1201
|
...$.length && {
|
|
1133
1202
|
translations: $
|
|
1134
1203
|
}
|
|
1135
1204
|
};
|
|
1136
|
-
return !
|
|
1137
|
-
context:
|
|
1205
|
+
return !h || !(l instanceof HTMLElement) ? w.create(l, E) : (await X({
|
|
1206
|
+
context: h,
|
|
1138
1207
|
element: l,
|
|
1139
|
-
creator:
|
|
1140
|
-
config:
|
|
1208
|
+
creator: w,
|
|
1209
|
+
config: E
|
|
1141
1210
|
})).editor;
|
|
1142
1211
|
})();
|
|
1143
|
-
return
|
|
1212
|
+
return k(d) && n && et(H, n), H;
|
|
1144
1213
|
}
|
|
1145
1214
|
}
|
|
1146
|
-
function
|
|
1215
|
+
function q(i, t) {
|
|
1147
1216
|
return t.every((e) => i[e]);
|
|
1148
1217
|
}
|
|
1149
1218
|
async function ut(i, t) {
|
|
1150
|
-
return
|
|
1219
|
+
return Y(
|
|
1151
1220
|
() => {
|
|
1152
|
-
const e =
|
|
1153
|
-
if (!
|
|
1221
|
+
const e = j(i);
|
|
1222
|
+
if (!q(e, t))
|
|
1154
1223
|
throw new Error(
|
|
1155
1224
|
`It looks like not all required root elements are present yet.
|
|
1156
1225
|
* If you want to wait for them, ensure they are registered before editor initialization.
|
|
@@ -1162,7 +1231,7 @@ Missing roots: ${t.filter((r) => !e[r]).join(", ")}.`
|
|
|
1162
1231
|
{ timeOutAfter: 2e3, retryAfter: 100 }
|
|
1163
1232
|
);
|
|
1164
1233
|
}
|
|
1165
|
-
class lt extends
|
|
1234
|
+
class lt extends P {
|
|
1166
1235
|
/**
|
|
1167
1236
|
* The promise that resolves when the UI part is mounted.
|
|
1168
1237
|
*/
|
|
@@ -1172,15 +1241,15 @@ class lt extends C {
|
|
|
1172
1241
|
*/
|
|
1173
1242
|
async mounted() {
|
|
1174
1243
|
const { editorId: t, name: e } = this.canonical;
|
|
1175
|
-
this.mountedPromise =
|
|
1244
|
+
this.mountedPromise = m.the.execute(t, (r) => {
|
|
1176
1245
|
if (this.isBeingDestroyed())
|
|
1177
1246
|
return;
|
|
1178
|
-
const { ui: n } = r, a = mt(e),
|
|
1179
|
-
if (!
|
|
1247
|
+
const { ui: n } = r, a = mt(e), o = n.view[a];
|
|
1248
|
+
if (!o) {
|
|
1180
1249
|
console.error(`Unknown UI part name: "${e}". Supported names are "toolbar" and "menubar".`);
|
|
1181
1250
|
return;
|
|
1182
1251
|
}
|
|
1183
|
-
this.element.appendChild(
|
|
1252
|
+
this.element.appendChild(o.element);
|
|
1184
1253
|
});
|
|
1185
1254
|
}
|
|
1186
1255
|
/**
|
|
@@ -1206,18 +1275,18 @@ const dt = {
|
|
|
1206
1275
|
"ckeditor5-ui-part": lt,
|
|
1207
1276
|
"ckeditor5-editable": at
|
|
1208
1277
|
};
|
|
1209
|
-
function
|
|
1278
|
+
function ht() {
|
|
1210
1279
|
for (const [i, t] of Object.entries(dt))
|
|
1211
1280
|
U(i, t);
|
|
1212
1281
|
}
|
|
1213
|
-
|
|
1282
|
+
ht();
|
|
1214
1283
|
export {
|
|
1215
|
-
|
|
1216
|
-
|
|
1284
|
+
P as ClassHook,
|
|
1285
|
+
p as ContextsRegistry,
|
|
1217
1286
|
S as CustomEditorPluginsRegistry,
|
|
1218
1287
|
at as EditableComponentHook,
|
|
1219
1288
|
ct as EditorComponentHook,
|
|
1220
|
-
|
|
1289
|
+
m as EditorsRegistry,
|
|
1221
1290
|
lt as UIPartComponentHook,
|
|
1222
1291
|
U as registerLivewireComponentHook
|
|
1223
1292
|
};
|