@openreachtech/furo-vue 1.3.1

package/lib/components/organisms/FuroEditor/FuroEditor.vue

@@ -0,0 +1,613 @@
+<script>
+import {
+  defineComponent,
+} from 'vue'
+
+import {
+  EditorContent,
+  useEditor,
+} from '@tiptap/vue-3'
+
+import FuroIcon from '../../atoms/FuroIcon/FuroIcon.vue'
+import FuroToolBar from '../../molecules/FuroToolBar/FuroToolBar.vue'
+import FuroSeparator from '../../molecules/FuroSeparator/FuroSeparator.vue'
+import FuroButton from '../../atoms/FuroButton/FuroButton.vue'
+import FuroTooltip from '../../molecules/FuroTooltip/FuroTooltip.vue'
+import FuroDropdownMenu from '../../molecules/FuroDropdownMenu/FuroDropdownMenu.vue'
+import FuroDialog from '../FuroDialog/FuroDialog.vue'
+import FuroTextField from '../../atoms/FuroTextField/FuroTextField.vue'
+
+import FuroEditorContext from './FuroEditorContext.js'
+
+import {
+  buildEditorExtensions,
+} from './build-editor-extensions.js'
+import {
+  createMentionExtension,
+} from './mention-suggestion.js'
+
+export default defineComponent({
+  name: 'FuroEditor',
+
+  components: {
+    EditorContent,
+    FuroIcon,
+    FuroToolBar,
+    FuroSeparator,
+    FuroButton,
+    FuroTooltip,
+    FuroDropdownMenu,
+    FuroDialog,
+    FuroTextField,
+  },
+
+  inheritAttrs: false,
+
+  props: {
+    parcel: {
+      /** @type {import('vue').PropType<import('./FuroEditorContext.js').FuroEditorParcel | null>} */
+      type: [
+        Object,
+        null,
+      ],
+      default: null,
+    },
+  },
+
+  emits: Object.values(FuroEditorContext.EMIT_EVENT_NAME),
+
+  setup (
+    props,
+    componentContext
+  ) {
+    const editorRef = useEditor(
+      FuroEditorContext.buildEditorOptions({
+        props,
+        componentContext,
+        buildExtensions: buildEditorExtensions,
+        createMention: createMentionExtension,
+      })
+    )
+
+    const context = FuroEditorContext.create({
+      props,
+      componentContext,
+      editorRef,
+    })
+      .setupComponent()
+
+    return {
+      context,
+    }
+  },
+})
+</script>
+
+<template>
+  <div
+    class="unit-editor"
+    :class="[
+      $attrs.class,
+      {
+        editable: context.isEditorEditable(),
+        'read-only': context.isReadOnly(),
+        plain: context.isPlain(),
+      },
+    ]"
+    :style="$attrs.style"
+  >
+    <FuroToolBar
+      v-if="context.isEditorEditable()"
+      class="toolbar"
+      :parcel="{
+        loopFocus: true,
+      }"
+    >
+      <slot
+        name="toolbar-start"
+        :command="context.command"
+        :editor="context.editor"
+      />
+
+      <template
+        v-for="entry in context.generateToolbarLayout()"
+        :key="entry.key"
+      >
+        <FuroSeparator
+          v-if="entry.type === 'separator'"
+          class="toolbar-separator"
+          :parcel="{
+            orientation: 'vertical',
+            decorative: true,
+          }"
+        />
+
+        <FuroDropdownMenu
+          v-if="entry.type === 'dropdown'"
+          :parcel="{
+            options: entry.options,
+            preventCloseAutoFocus: true,
+          }"
+          :trigger-parcel="{
+            variant: context.extractDropdownVariant({ kind: entry.dropdownKind }),
+            size: 'sm',
+            'aria-label': entry.label,
+          }"
+          @option:select="context.onDropdownSelect({
+            value: $event.option.value,
+          })"
+        >
+          <template #trigger>
+            <slot
+              name="toolbar-dropdown-icon"
+              :entry="entry"
+            >
+              <FuroIcon
+                :name="entry.iconName"
+                class="toolbar-icon"
+              />
+            </slot>
+          </template>
+
+          <template #option-label="{ option }">
+            <span
+              v-if="entry.hasSwatch"
+              class="furo-editor-color-swatch"
+              :style="{ backgroundColor: context.extractColorSwatch({ value: option.value }) }"
+            />
+
+            {{ option.label }}
+          </template>
+        </FuroDropdownMenu>
+
+        <FuroDropdownMenu
+          v-if="entry.type === 'overflow'"
+          :parcel="{
+            options: context.generateOverflowOptions(),
+            preventCloseAutoFocus: true,
+          }"
+          :trigger-parcel="{
+            variant: 'ghost',
+            size: 'sm',
+            'aria-label': context.extractLabels().overflow,
+          }"
+          @option:select="context.onOverflowSelect({
+            value: $event.option.value,
+          })"
+          @option:checked-change="context.onOverflowSelect({
+            value: $event.option.value,
+          })"
+        >
+          <template #trigger>
+            <FuroIcon
+              name="ph:dots-three"
+              class="toolbar-icon"
+            />
+          </template>
+
+          <template #option-label="{ option }">
+            <FuroIcon
+              v-if="context.extractOverflowIconName({ option })"
+              :name="context.extractOverflowIconName({ option })"
+              class="toolbar-icon"
+            />
+
+            <span
+              v-if="context.hasOverflowSwatch({ option })"
+              class="furo-editor-color-swatch"
+              :style="{ backgroundColor: context.extractColorSwatch({ value: option.value }) }"
+            />
+
+            {{ option.label }}
+          </template>
+        </FuroDropdownMenu>
+
+        <FuroTooltip
+          v-if="entry.type === 'control'"
+          :parcel="{
+            text: entry.control.tooltip,
+          }"
+        >
+          <template #trigger>
+            <FuroButton
+              :parcel="{
+                variant: context.extractControlVariant({ control: entry.control }),
+                size: 'sm',
+              }"
+              :aria-label="entry.control.tooltip"
+              @click="context.onControlClick({ control: entry.control })"
+            >
+              <slot
+                name="toolbar-control-icon"
+                :entry="entry"
+                :is-active="context.isControlActive({ control: entry.control })"
+              >
+                <FuroIcon
+                  v-show="context.isControlActive({ control: entry.control })"
+                  :name="entry.control.activeIconName"
+                  class="toolbar-icon"
+                />
+
+                <FuroIcon
+                  v-show="!context.isControlActive({ control: entry.control })"
+                  :name="entry.control.iconName"
+                  class="toolbar-icon"
+                />
+              </slot>
+            </FuroButton>
+          </template>
+        </FuroTooltip>
+      </template>
+
+      <slot
+        name="toolbar-end"
+        :command="context.command"
+        :editor="context.editor"
+        :hidden-entries="context.generateOverflowEntries()"
+      />
+    </FuroToolBar>
+
+    <EditorContent
+      class="content"
+      :editor="context.editorRef.value"
+    />
+
+    <div
+      v-if="context.hasAttachmentsSlot()"
+      class="attachments"
+    >
+      <slot
+        name="attachments"
+        :attached-files="context.attachedFiles"
+        :remove="context.removeAttachedFile"
+        :is-editable="context.isEditorEditable()"
+      />
+    </div>
+
+    <slot name="footer" />
+
+    <FuroDialog
+      :parcel="{
+        open: context.isLinkDialogOpen(),
+        title: context.extractLabels().linkDialogTitle,
+        modal: true,
+      }"
+      @update:open="context.onLinkDialogOpenChange({
+        isOpen: $event,
+      })"
+    >
+      <template #default>
+        <div class="unit-editor-link-dialog">
+          <div class="control">
+            <label class="label">
+              {{ context.extractLabels().linkUrlLabel }}
+            </label>
+
+            <FuroTextField
+              :parcel="{
+                value: context.addLinkReactive.url,
+              }"
+              placeholder="https://example.com"
+              @change-value="context.updateLinkUrl({
+                url: $event.value,
+              })"
+            />
+          </div>
+
+          <div class="control">
+            <label class="label">
+              {{ context.extractLabels().linkDisplayTextLabel }}
+            </label>
+
+            <FuroTextField
+              :parcel="{
+                value: context.addLinkReactive.displayText,
+              }"
+              @change-value="context.updateLinkDisplayText({
+                displayText: $event.value,
+              })"
+            />
+          </div>
+        </div>
+      </template>
+
+      <template #footer="{ close }">
+        <FuroButton
+          :parcel="{
+            variant: 'ghost',
+          }"
+          @click="close()"
+        >
+          {{ context.extractLabels().linkCancel }}
+        </FuroButton>
+
+        <FuroButton
+          @click="context.saveLink()"
+        >
+          {{ context.extractLabels().linkSave }}
+        </FuroButton>
+      </template>
+    </FuroDialog>
+  </div>
+</template>
+
+<style>
+@layer furo {
+  .furo-editor-color-swatch {
+    flex-shrink: 0;
+
+    width: 0.875rem;
+    height: 0.875rem;
+
+    border-radius: 50%;
+  }
+
+  .unit-editor {
+    display: flex;
+    flex-direction: column;
+
+    width: 100%;
+
+    border: var(--size-thinnest) solid var(--color-input);
+    border-radius: var(--size-border-radius-medium);
+
+    background-color: var(--color-background);
+
+    transition-duration: var(--transition-timer);
+    transition-property: border-color, box-shadow;
+  }
+
+  .unit-editor.editable:focus-within {
+    border-color: var(--color-ring);
+  }
+
+  .unit-editor.read-only {
+    border-color: transparent;
+
+    background-color: var(--color-muted);
+  }
+
+  /* Plain appearance — render as bare text, no chrome. */
+  .unit-editor.plain {
+    border: none;
+    border-radius: 0;
+
+    background-color: transparent;
+  }
+
+  .unit-editor.plain > .content .tiptap {
+    min-height: 0;
+
+    padding-block: 0;
+    padding-inline: 0;
+  }
+
+  /* Toolbar — neutralize FuroToolBar's own box so it blends into the editor. */
+  .unit-editor > .toolbar.unit-tool-bar {
+    flex-wrap: wrap;
+    gap: var(--size-space-tiny);
+
+    border: none;
+    border-block-end: var(--size-thinnest) solid var(--color-border);
+    border-radius: 0;
+
+    padding-block: 0.3125rem;
+    padding-inline: 0.375rem;
+
+    background-color: transparent;
+  }
+
+  .unit-editor > .toolbar > .toolbar-separator {
+    align-self: center;
+
+    block-size: 1.25rem;
+
+    margin-inline: 0.125rem;
+  }
+
+  .unit-editor > .toolbar .toolbar-icon {
+    width: 1.125rem;
+    height: 1.125rem;
+  }
+
+  /* Editing surface */
+  .unit-editor > .content .tiptap {
+    min-height: 7rem;
+
+    padding-block: 0.625rem;
+    padding-inline: 0.875rem;
+
+    outline: none;
+
+    color: var(--color-foreground);
+    font: var(--font-body-medium);
+  }
+
+  .unit-editor > .content .tiptap :first-child {
+    margin-block-start: 0;
+  }
+
+  .unit-editor > .content .tiptap p {
+    margin-block: 0.25rem;
+    margin-inline: 0;
+
+    /* not `font:`, which would reset the italic the blockquote rule sets */
+    line-height: inherit;
+  }
+
+  .unit-editor > .content .tiptap h1 {
+    margin-block: 0.75rem 0.375rem;
+
+    font: var(--font-headline-large);
+    font-weight: var(--font-weight-semibold, 600);
+  }
+
+  .unit-editor > .content .tiptap h2 {
+    margin-block: 0.625rem 0.375rem;
+
+    font: var(--font-headline-medium);
+    font-weight: var(--font-weight-semibold, 600);
+  }
+
+  .unit-editor > .content .tiptap h3 {
+    margin-block: 0.5rem 0.25rem;
+
+    font: var(--font-headline-small);
+    font-weight: var(--font-weight-semibold, 600);
+  }
+
+  .unit-editor > .content .tiptap h4 {
+    margin-block: 0.5rem 0.25rem;
+
+    font: var(--font-label-medium);
+    font-weight: var(--font-weight-semibold, 600);
+  }
+
+  .unit-editor > .content .tiptap ul,
+  .unit-editor > .content .tiptap ol {
+    margin-block: 0.25rem;
+    padding-inline-start: 1.5rem;
+  }
+
+  .unit-editor > .content .tiptap ul {
+    list-style-type: disc;
+  }
+
+  .unit-editor > .content .tiptap ol {
+    list-style-type: decimal;
+  }
+
+  .unit-editor > .content .tiptap li {
+    margin-block: 0.125rem;
+  }
+
+  .unit-editor > .content .tiptap li p {
+    margin-block: 0;
+  }
+
+  .unit-editor > .content .tiptap a {
+    color: var(--color-link);
+    text-decoration: underline;
+    text-underline-offset: 0.125rem;
+
+    cursor: pointer;
+  }
+
+  .unit-editor > .content .tiptap blockquote {
+    margin-block: 0.5rem;
+    margin-inline: 0;
+
+    border-inline-start: 0.1875rem solid var(--color-border);
+
+    padding-block: 0.125rem;
+    padding-inline-start: 0.875rem;
+
+    color: var(--color-muted-foreground);
+    font-style: italic;
+  }
+
+  .unit-editor > .content .tiptap code {
+    border-radius: 0.25rem;
+
+    padding-block: 0.0625rem;
+    padding-inline: 0.25rem;
+
+    background-color: var(--color-muted);
+
+    font-family: monospace;
+    font-size: 0.875em;
+  }
+
+  .unit-editor > .content .tiptap pre {
+    margin-block: 0.5rem;
+
+    border-radius: 0.375rem;
+
+    padding-block: 0.625rem;
+    padding-inline: 0.875rem;
+
+    background-color: var(--color-muted);
+
+    overflow-x: auto;
+  }
+
+  .unit-editor > .content .tiptap pre code {
+    padding: 0;
+
+    background-color: transparent;
+  }
+
+  .unit-editor > .content .tiptap hr {
+    margin-block: 0.75rem;
+
+    border: none;
+    border-block-start: var(--size-thinnest) solid var(--color-border);
+  }
+
+  .unit-editor > .content .tiptap img {
+    display: block;
+
+    margin-block: 0.5rem;
+
+    max-width: 100%;
+    height: auto;
+
+    border-radius: 0.375rem;
+  }
+
+  .unit-editor > .content .tiptap img.ProseMirror-selectednode {
+    outline: 0.125rem solid var(--color-ring);
+  }
+
+  /* .furo-mention chip styling is shared (lib/assets/css/furo/0050.furo-editor-content.css)
+     so it applies both here and when saved content is rendered outside the editor. */
+
+  .unit-editor > .content .tiptap p.is-editor-empty:first-child {
+    position: relative;
+  }
+
+  .unit-editor > .content .tiptap p.is-editor-empty:first-child::before {
+    content: attr(data-placeholder);
+
+    /* Span the full paragraph width (inset-inline: 0) and inherit text-align, so the
+       placeholder follows the paragraph alignment (left / center / right) on a single
+       line instead of shrink-wrapping to the caret. height: 0 keeps it off the flow. */
+    position: absolute;
+    inset-inline: 0;
+
+    height: 0;
+
+    color: var(--color-muted-foreground);
+
+    pointer-events: none;
+  }
+
+  /* Attachments region (consumer renders the items via the slot) */
+  .unit-editor > .attachments {
+    border-block-start: var(--size-thinnest) solid var(--color-border);
+
+    padding-block: 0.5rem;
+    padding-inline: 0.875rem;
+  }
+
+  /* Link dialog */
+  .unit-editor-link-dialog {
+    display: flex;
+    flex-direction: column;
+    gap: var(--size-space-medium);
+
+    min-width: 22rem;
+  }
+
+  .unit-editor-link-dialog > .control {
+    display: flex;
+    flex-direction: column;
+    gap: var(--size-space-tiny);
+  }
+
+  .unit-editor-link-dialog > .control > .label {
+    color: var(--color-muted-foreground);
+    font: var(--font-label-tiny);
+  }
+}
+</style>