[6.x] Autocomplete editor

lang/en/fieldtypes.php

@@ -24,6 +24,14 @@
     'assets.dynamic_folder_pending_save' => 'This field will be available after saving.',
     'assets.title' => 'Assets',
     'asset_folders.config.container' => 'Choose which asset container to use for this field.',
+    'autocomplete_editor.config.buttons' => 'Choose which buttons to show in the toolbar.',
+    'autocomplete_editor.config.enable_line_breaks' => 'Allows adding line breaks to the content.',
+    'autocomplete_editor.config.inline' => 'Disable all block-level elements like headings and lists.',
+    'autocomplete_editor.config.markdown' => 'Allow formatting, stored as Markdown. When disabled, the content is plain text and mentions.',
+    'autocomplete_editor.config.options' => 'Set the values and their optional labels available for autocompletion.',
+    'autocomplete_editor.config.placeholder' => 'Text to display when the field is empty.',
+    'autocomplete_editor.config.trigger' => 'The character that triggers the autocomplete suggestions.',
+    'autocomplete_editor.title' => 'Autocomplete Editor',
     'bard.config.allow_source' => 'Enable to view the HTML source code while writing.',
     'bard.config.always_show_set_button' => 'Enable to always show the "Add Set" button.',
     'bard.config.buttons' => 'Choose which buttons to show in the toolbar.',

package.json

@@ -27,35 +27,38 @@
     "@internationalized/date": "^3.7.0",
     "@shopify/draggable": "^1.0.0-beta.12",
     "@simplewebauthn/browser": "^13.2.2",
-    "@tiptap/core": "^3.0.0",
-    "@tiptap/extension-blockquote": "^3.0.0",
-    "@tiptap/extension-bold": "^3.0.0",
-    "@tiptap/extension-bullet-list": "^3.0.0",
-    "@tiptap/extension-character-count": "^3.0.0",
-    "@tiptap/extension-code": "^3.0.0",
-    "@tiptap/extension-code-block": "^3.0.0",
-    "@tiptap/extension-code-block-lowlight": "^3.0.0",
-    "@tiptap/extension-document": "^3.0.0",
-    "@tiptap/extension-hard-break": "^3.0.0",
-    "@tiptap/extension-heading": "^3.0.0",
-    "@tiptap/extension-history": "^3.0.0",
-    "@tiptap/extension-horizontal-rule": "^3.0.0",
-    "@tiptap/extension-italic": "^3.0.0",
-    "@tiptap/extension-list": "^3.0.0",
-    "@tiptap/extension-list-item": "^3.0.0",
-    "@tiptap/extension-ordered-list": "^3.0.0",
-    "@tiptap/extension-paragraph": "^3.0.0",
-    "@tiptap/extension-strike": "^3.0.0",
-    "@tiptap/extension-subscript": "^3.0.0",
-    "@tiptap/extension-superscript": "^3.0.0",
-    "@tiptap/extension-table": "^3.0.0",
-    "@tiptap/extension-text": "^3.0.0",
-    "@tiptap/extension-text-align": "^3.0.0",
-    "@tiptap/extension-typography": "^3.0.0",
-    "@tiptap/extension-underline": "^3.0.0",
-    "@tiptap/extensions": "^3.0.0",
-    "@tiptap/pm": "^3.0.0",
-    "@tiptap/vue-3": "^3.0.0",
+    "@tiptap/core": "^3.28.0",
+    "@tiptap/extension-blockquote": "^3.28.0",
+    "@tiptap/extension-bold": "^3.28.0",
+    "@tiptap/extension-bullet-list": "^3.28.0",
+    "@tiptap/extension-character-count": "^3.28.0",
+    "@tiptap/extension-code": "^3.28.0",
+    "@tiptap/extension-code-block": "^3.28.0",
+    "@tiptap/extension-code-block-lowlight": "^3.28.0",
+    "@tiptap/extension-document": "^3.28.0",
+    "@tiptap/extension-hard-break": "^3.28.0",
+    "@tiptap/extension-heading": "^3.28.0",
+    "@tiptap/extension-history": "^3.28.0",
+    "@tiptap/extension-horizontal-rule": "^3.28.0",
+    "@tiptap/extension-italic": "^3.28.0",
+    "@tiptap/extension-list": "^3.28.0",
+    "@tiptap/extension-list-item": "^3.28.0",
+    "@tiptap/extension-mention": "^3.28.0",
+    "@tiptap/extension-ordered-list": "^3.28.0",
+    "@tiptap/extension-paragraph": "^3.28.0",
+    "@tiptap/extension-strike": "^3.28.0",
+    "@tiptap/extension-subscript": "^3.28.0",
+    "@tiptap/extension-superscript": "^3.28.0",
+    "@tiptap/extension-table": "^3.28.0",
+    "@tiptap/extension-text": "^3.28.0",
+    "@tiptap/extension-text-align": "^3.28.0",
+    "@tiptap/extension-typography": "^3.28.0",
+    "@tiptap/extension-underline": "^3.28.0",
+    "@tiptap/extensions": "^3.28.0",
+    "@tiptap/markdown": "^3.29.2",
+    "@tiptap/pm": "^3.28.0",
+    "@tiptap/suggestion": "^3.28.0",
+    "@tiptap/vue-3": "^3.28.0",
     "alpinejs": "^3.1.1",
     "aria-hidden": "^1.2.6",
     "autosize": "~6.0.1",

packages/cms/src/ui.js

@@ -1,6 +1,7 @@
 export const {
     Alert,
     AuthCard,
+    AutocompleteEditor,
     Avatar,
     Badge,
     Button,

resources/js/bootstrap/cms/ui.js

@@ -1,6 +1,7 @@
 export {
     Alert,
     AuthCard,
+    AutocompleteEditor,
     Avatar,
     Badge,
     Button,

resources/js/bootstrap/fieldtypes.js

@@ -9,6 +9,7 @@ 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 AutocompleteEditorFieldtype from '../components/fieldtypes/AutocompleteEditorFieldtype.vue';
 import BardButtonsSettingFieldtype from '../components/fieldtypes/bard/BardButtonsSettingFieldtype.vue';
 import BlueprintsFieldtype from '../components/fieldtypes/BlueprintsFieldtype.vue';
 import ButtonGroupFieldtype from '../components/fieldtypes/ButtonGroupFieldtype.vue';
@@ -72,6 +73,7 @@ export default function registerFieldtypes(app) {
     app.component('assets-fieldtype', AssetsFieldtype);
     app.component('assets-fieldtype-index', AssetsIndexFieldtype);
     app.component('asset_folder-fieldtype', AssetFolderFieldtype);
+    app.component('autocomplete_editor-fieldtype', AutocompleteEditorFieldtype);
     app.component(
         'bard-fieldtype',
         defineAsyncComponent(() => import('../components/fieldtypes/bard/BardFieldtype.vue')),

resources/js/components/fieldtypes/AutocompleteEditorFieldtype.vue

@@ -0,0 +1,55 @@
+<template>
+    <AutocompleteEditor
+        :model-value="content"
+        :options="meta.options"
+        :inline="markdown ? config.inline : true"
+        :enable-line-breaks="config.enable_line_breaks"
+        :buttons="markdown ? config.buttons : []"
+        :trigger="config.trigger"
+        :placeholder="config.placeholder"
+        :read-only="isReadOnly"
+        @update:model-value="updateContent"
+    />
+</template>
+
+<script setup>
+import { computed } from 'vue';
+import Fieldtype from '@/components/fieldtypes/fieldtype.js';
+import { AutocompleteEditor } from '@/components/ui';
+import { contentToMarkdown, markdownToContent } from '@/components/ui/AutocompleteEditor/markdown';
+import { contentToText, textToContent } from '@/components/ui/AutocompleteEditor/text';
+
+const emit = defineEmits(Fieldtype.emits);
+const props = defineProps(Fieldtype.props);
+const { isReadOnly, update } = Fieldtype.use(emit, props);
+
+// Without markdown the editor is limited to a single paragraph of text and mentions,
+// so there's no formatting for the schema to allow and nothing for a toolbar to do.
+const markdown = props.config.markdown !== false;
+const parse = markdown ? markdownToContent : textToContent;
+const serialize = markdown ? contentToMarkdown : contentToText;
+
+// Mention labels aren't stored, only the value, so they're
+// resolved from the configured options every time content is loaded.
+function hydrateMentionLabels(nodes) {
+    const labels = Object.fromEntries(props.meta.options.map((option) => [option.value, option.label]));
+
+    return nodes.map((node) => {
+        if (node.type === 'mention') {
+            const label = labels[node.attrs.value];
+
+            return label ? { ...node, attrs: { ...node.attrs, label } } : node;
+        }
+
+        if (node.content) {
+            return { ...node, content: hydrateMentionLabels(node.content) };
+        }
+
+        return node;
+    });
+}
+
+const content = computed(() => (props.value ? hydrateMentionLabels(parse(props.value)) : []));
+
+const updateContent = (content) => update(serialize(content));
+</script>