From 6a58389ed9c702cd7584fca4105cc977ac67f83d Mon Sep 17 00:00:00 2001 From: Jason Varga Date: Tue, 18 Feb 2025 16:21:06 -0500 Subject: [PATCH 1/2] Use dynamic imports for tiptap, prosemirror, codemirror. --- resources/js/bootstrap/fieldtypes.js | 31 +++++++++++++++++++--------- resources/js/components/Bard.js | 18 +++++++++------- 2 files changed, 31 insertions(+), 18 deletions(-) diff --git a/resources/js/bootstrap/fieldtypes.js b/resources/js/bootstrap/fieldtypes.js index 08d24a6305..4b3a56a39d 100644 --- a/resources/js/bootstrap/fieldtypes.js +++ b/resources/js/bootstrap/fieldtypes.js @@ -1,3 +1,4 @@ +import { defineAsyncComponent } from 'vue'; import RevealerFieldtype from '../components/fieldtypes/RevealerFieldtype.vue'; import TemplateFieldtype from '../components/fieldtypes/TemplateFieldtype.vue'; import Select from '../components/inputs/Select.vue'; @@ -12,12 +13,9 @@ import ArrayFieldtype from '../components/fieldtypes/ArrayFieldtype.vue'; import AssetsFieldtype from '../components/fieldtypes/assets/AssetsFieldtype.vue'; import AssetsIndexFieldtype from '../components/fieldtypes/assets/AssetsIndexFieldtype.vue'; import AssetFolderFieldtype from '../components/fieldtypes/AssetFolderFieldtype.vue'; -import BardFieldtype from '../components/fieldtypes/bard/BardFieldtype.vue'; -import BardSet from '../components/fieldtypes/bard/Set.vue'; import BardButtonsSettingFieldtype from '../components/fieldtypes/bard/BardButtonsSettingFieldtype.vue'; import ButtonGroupFieldtype from '../components/fieldtypes/ButtonGroupFieldtype.vue'; import CheckboxesFieldtype from '../components/fieldtypes/CheckboxesFieldtype.vue'; -import CodeFieldtype from '../components/fieldtypes/CodeFieldtype.vue'; import Routes from '../components/collections/Routes.vue'; import TitleFormats from '../components/collections/TitleFormats.vue'; import ColorFieldtype from '../components/fieldtypes/ColorFieldtype.vue'; @@ -40,7 +38,6 @@ import IntegerFieldtype from '../components/fieldtypes/IntegerFieldtype.vue'; import LinkFieldtype from '../components/fieldtypes/LinkFieldtype.vue'; import ListFieldtype from '../components/fieldtypes/ListFieldtype.vue'; import ListIndexFieldtype from '../components/fieldtypes/ListIndexFieldtype.vue'; -import MarkdownFieldtype from '../components/fieldtypes/markdown/MarkdownFieldtype.vue'; import MarkdownButtonsSettingFieldtype from '../components/fieldtypes/markdown/MarkdownButtonsSettingFieldtype.vue'; import RadioFieldtype from '../components/fieldtypes/RadioFieldtype.vue'; import RangeFieldtype from '../components/fieldtypes/RangeFieldtype.vue'; @@ -61,7 +58,6 @@ import ToggleFieldtype from '../components/fieldtypes/ToggleFieldtype.vue'; import ToggleIndexFieldtype from '../components/fieldtypes/ToggleIndexFieldtype.vue'; import WidthFieldtype from '../components/fieldtypes/WidthFieldtype.vue'; import VideoFieldtype from '../components/fieldtypes/VideoFieldtype.vue'; -import YamlFieldtype from '../components/fieldtypes/YamlFieldtype.vue'; import SetPicker from '../components/fieldtypes/replicator/SetPicker.vue'; import SetField from '../components/fieldtypes/replicator/Field.vue'; @@ -78,12 +74,21 @@ export default function registerFieldtypes(app) { app.component('assets-fieldtype', AssetsFieldtype); app.component('assets-fieldtype-index', AssetsIndexFieldtype); app.component('asset_folder-fieldtype', AssetFolderFieldtype); - app.component('bard-fieldtype', BardFieldtype); - app.component('bard-fieldtype-set', BardSet); + app.component( + 'bard-fieldtype', + defineAsyncComponent(() => import('../components/fieldtypes/bard/BardFieldtype.vue')), + ); + app.component( + 'bard-fieldtype-set', + defineAsyncComponent(() => import('../components/fieldtypes/bard/Set.vue')), + ); app.component('bard_buttons_setting-fieldtype', BardButtonsSettingFieldtype); app.component('button_group-fieldtype', ButtonGroupFieldtype); app.component('checkboxes-fieldtype', CheckboxesFieldtype); - app.component('code-fieldtype', CodeFieldtype); + app.component( + 'code-fieldtype', + defineAsyncComponent(() => import('../components/fieldtypes/CodeFieldtype.vue')), + ); app.component('collection_routes-fieldtype', Routes); app.component('collection_title_formats-fieldtype', TitleFormats); app.component('color-fieldtype', ColorFieldtype); @@ -106,7 +111,10 @@ export default function registerFieldtypes(app) { app.component('link-fieldtype', LinkFieldtype); app.component('list-fieldtype', ListFieldtype); app.component('list-fieldtype-index', ListIndexFieldtype); - app.component('markdown-fieldtype', MarkdownFieldtype); + app.component( + 'markdown-fieldtype', + defineAsyncComponent(() => import('../components/fieldtypes/markdown/MarkdownFieldtype.vue')), + ); app.component('markdown_buttons_setting-fieldtype', MarkdownButtonsSettingFieldtype); app.component('radio-fieldtype', RadioFieldtype); app.component('range-fieldtype', RangeFieldtype); @@ -128,7 +136,10 @@ export default function registerFieldtypes(app) { app.component('toggle-fieldtype-index', ToggleIndexFieldtype); app.component('width-fieldtype', WidthFieldtype); app.component('video-fieldtype', VideoFieldtype); - app.component('yaml-fieldtype', YamlFieldtype); + app.component( + 'yaml-fieldtype', + defineAsyncComponent(() => import('../components/fieldtypes/YamlFieldtype.vue')), + ); app.component('set-picker', SetPicker); app.component('set-field', SetField); app.component('revealer-fieldtype', RevealerFieldtype); diff --git a/resources/js/components/Bard.js b/resources/js/components/Bard.js index 720fe9d8d4..f7e97b359e 100644 --- a/resources/js/components/Bard.js +++ b/resources/js/components/Bard.js @@ -1,9 +1,3 @@ -import * as core from '@tiptap/core'; -import * as vue3 from '@tiptap/vue-3'; -import * as state from '@tiptap/pm/state'; -import * as model from '@tiptap/pm/model'; -import * as view from '@tiptap/pm/view'; - class Bard { constructor(instance) { this.instance = instance; @@ -24,10 +18,18 @@ class Bard { this.buttonCallbacks.push(callback); } - get tiptap() { + async tiptap() { + const [core, vue3, state, model, view] = await Promise.all([ + import('@tiptap/core'), + import('@tiptap/vue-3'), + import('@tiptap/pm/state'), + import('@tiptap/pm/model'), + import('@tiptap/pm/view'), + ]); + return { core, - vue2, + vue3, pm: { state, model, From 2d3c20d200fe6e9e1a778bd62a59e8a278e09a99 Mon Sep 17 00:00:00 2001 From: Jason Varga Date: Fri, 28 Feb 2025 16:27:25 -0500 Subject: [PATCH 2/2] Remove $bard.tiptap api in favor of passing it into callbacks --- resources/js/components/Bard.js | 20 ------------------- .../fieldtypes/bard/BardFieldtype.vue | 8 ++++++-- resources/js/util/tiptap.js | 19 ++++++++++++++++++ 3 files changed, 25 insertions(+), 22 deletions(-) create mode 100644 resources/js/util/tiptap.js diff --git a/resources/js/components/Bard.js b/resources/js/components/Bard.js index f7e97b359e..cc28e0816f 100644 --- a/resources/js/components/Bard.js +++ b/resources/js/components/Bard.js @@ -17,26 +17,6 @@ class Bard { buttons(callback) { this.buttonCallbacks.push(callback); } - - async tiptap() { - const [core, vue3, state, model, view] = await Promise.all([ - import('@tiptap/core'), - import('@tiptap/vue-3'), - import('@tiptap/pm/state'), - import('@tiptap/pm/model'), - import('@tiptap/pm/view'), - ]); - - return { - core, - vue3, - pm: { - state, - model, - view, - }, - }; - } } export default Bard; diff --git a/resources/js/components/fieldtypes/bard/BardFieldtype.vue b/resources/js/components/fieldtypes/bard/BardFieldtype.vue index 68bd19ad31..a56df249bf 100644 --- a/resources/js/components/fieldtypes/bard/BardFieldtype.vue +++ b/resources/js/components/fieldtypes/bard/BardFieldtype.vue @@ -176,8 +176,10 @@ import { availableButtons, addButtonHtml } from '../bard/buttons'; import readTimeEstimate from 'read-time-estimate'; import { common, createLowlight } from 'lowlight'; import 'highlight.js/styles/github.css'; +import importTiptap from '@/util/tiptap.js'; const lowlight = createLowlight(common); +let tiptap = null; export default { mixins: [Fieldtype, ManagesSetMeta], @@ -379,7 +381,9 @@ export default { }, }, - mounted() { + async mounted() { + tiptap = await importTiptap(); + this.initToolbarButtons(); this.initEditor(); @@ -882,7 +886,7 @@ export default { } this.$bard.extensionCallbacks.forEach((callback) => { - let returned = callback({ bard: this }); + let returned = callback({ bard: this, tiptap }); exts = exts.concat(Array.isArray(returned) ? returned : [returned]); }); diff --git a/resources/js/util/tiptap.js b/resources/js/util/tiptap.js new file mode 100644 index 0000000000..246f59ecc7 --- /dev/null +++ b/resources/js/util/tiptap.js @@ -0,0 +1,19 @@ +export default async function () { + const [core, vue3, state, model, view] = await Promise.all([ + import('@tiptap/core'), + import('@tiptap/vue-3'), + import('@tiptap/pm/state'), + import('@tiptap/pm/model'), + import('@tiptap/pm/view'), + ]); + + return { + core, + vue3, + pm: { + state, + model, + view, + }, + }; +}