@plutocms/docs 0.0.0-stage → 0.16.0

package/app/components/Pluto/Docs/Blocks/PlutoBlockInspector.vue

@@ -0,0 +1,519 @@
+<script setup lang="ts">
+// The right panel (the Block tab): the controls of the selected block. A Text
+// block has a rich text box. A Code block has a language, a file name and a
+// code box. A component has its content (one control for each slot) and its
+// settings. Unknown settings are in the Advanced section. Nothing here shows
+// raw keys or YAML, except in Advanced and in "Edit as Markdown".
+import type {
+  PlutoBlock,
+  PlutoComponentBlock,
+  PlutoPropValue,
+} from '../../../../../shared/utils/blocks/types'
+import {
+  resolveSlotMode,
+  slotMarkdown,
+} from '../../../../../shared/utils/blocks/editor'
+import { blockMarkdown } from '../../../../../shared/utils/blocks/operations'
+import PlutoBlockPropControl from './PlutoBlockPropControl.vue'
+import PlutoBlockRawEditor from './PlutoBlockRawEditor.vue'
+import PlutoBlockTextEditor from './PlutoBlockTextEditor.vue'
+
+defineProps<{
+  disabled?: boolean
+}>()
+
+const editor = usePlutoBlockEditor()
+const { t, tx } = usePlutoI18n()
+const { slotLabel, addLabel } = usePlutoBlockLabels()
+
+const block = computed(() => editor.selected.value?.block)
+const info = computed(() =>
+  block.value ? editor.describe(block.value) : undefined
+)
+const definition = computed(() =>
+  block.value ? editor.definitionOf(block.value) : undefined
+)
+const parent = computed(() => editor.selected.value?.parent)
+
+// "Edit as Markdown" shows the Markdown of the block in a box. It resets with the selection.
+const rawOpen = ref(false)
+watch(
+  () => block.value?.id,
+  () => {
+    rawOpen.value = false
+  }
+)
+
+const description = computed(() => {
+  const text = definition.value?.description
+  return text ? tx(text) : undefined
+})
+
+const LANGUAGES = [
+  'bash',
+  'css',
+  'diff',
+  'html',
+  'js',
+  'json',
+  'md',
+  'sh',
+  'sql',
+  'ts',
+  'tsx',
+  'vue',
+  'yaml',
+]
+
+// --- Component settings ---------------------------------------------------------
+
+const settings = computed(() => {
+  const props = definition.value?.props ?? {}
+  return Object.entries(props).filter(([, prop]) => !prop.advanced)
+})
+
+const advanced = computed(() => {
+  const props = definition.value?.props ?? {}
+  return Object.entries(props).filter(([, prop]) => prop.advanced)
+})
+
+// A prop with a `slot` (the label of a button) is one field for the prop and the slot. The slot
+// does not show in Content.
+const coveredSlots = computed(
+  () =>
+    new Set(
+      Object.values(definition.value?.props ?? {}).flatMap((prop) =>
+        prop.slot ? [prop.slot] : []
+      )
+    )
+)
+
+// The field edits the slot when the block has text in it, else the prop. It is chosen when the
+// block is selected, so clearing the field does not move the text to the other place while typing.
+const slotBacked = ref(new Set<string>())
+watch(
+  () => block.value?.id,
+  () => {
+    const current = block.value
+    slotBacked.value = new Set(
+      current?.kind === 'component'
+        ? Object.entries(definition.value?.props ?? {}).flatMap(
+            ([name, prop]) =>
+              prop.slot && slotMarkdown(current, prop.slot).trim() ? [name] : []
+          )
+        : []
+    )
+  },
+  { immediate: true }
+)
+
+function propValue(name: string): PlutoPropValue | undefined {
+  const slot = definition.value?.props?.[name]?.slot
+  return slot && slotBacked.value.has(name)
+    ? slotMarkdown(component(), slot)
+    : component().props[name]
+}
+
+function setPropValue(name: string, value: PlutoPropValue) {
+  const slot = definition.value?.props?.[name]?.slot
+  if (slot && slotBacked.value.has(name)) {
+    editor.setSlot(component().id, slot, String(value ?? ''))
+  } else {
+    editor.setProp(component().id, name, value)
+  }
+}
+
+const slots = computed(() => {
+  const current = block.value
+  if (current?.kind !== 'component') {
+    return []
+  }
+  return Object.entries(definition.value?.slots ?? {})
+    .filter(([name]) => !coveredSlots.value.has(name))
+    .map(([name, slot]) => ({
+      name,
+      label: slotLabel(definition.value, name),
+      add: addLabel(definition.value, name),
+      mode: resolveSlotMode(
+        current,
+        name,
+        slot.content === 'rich' ||
+          slot.content === 'inline' ||
+          slot.content === 'blocks'
+          ? slot.content
+          : undefined
+      ),
+      children: current.slots[name] ?? [],
+      accepts: slot.accepts,
+    }))
+})
+
+function component(): PlutoComponentBlock {
+  return block.value as PlutoComponentBlock
+}
+
+function childInfo(child: PlutoBlock) {
+  const described = editor.describe(child)
+  return { ...described, label: tx(described.label) }
+}
+
+function addTo(name: string) {
+  editor.openPalette({
+    parentId: component().id,
+    slot: name,
+    index: (component().slots[name] ?? []).length,
+  })
+}
+
+function rawMarkdown(): string {
+  return block.value ? blockMarkdown(block.value) : ''
+}
+
+function applyRaw(markdown: string) {
+  if (!block.value) {
+    return
+  }
+  if (block.value.kind === 'raw' || block.value.kind === 'text') {
+    editor.updateText(block.value.id, markdown)
+  } else {
+    editor.replaceMarkdown(block.value.id, markdown)
+    rawOpen.value = false
+  }
+}
+</script>
+
+<template>
+  <div
+    :aria-label="t('docs.editor.blockPanel')"
+    class="flex flex-col gap-5"
+    role="region"
+    data-pluto-block-ui
+  >
+    <UEmpty
+      v-if="!block || !info"
+      :title="t('docs.editor.nothingSelectedTitle')"
+      :description="t('docs.editor.nothingSelected')"
+      :actions="[
+        {
+          label: t('docs.editor.addBlock'),
+          icon: 'i-lucide-plus',
+          color: 'primary',
+          variant: 'soft',
+          onClick: () => editor.openPalette(),
+        },
+      ]"
+      icon="i-lucide-mouse-pointer-click"
+      variant="naked"
+    />
+
+    <template v-else>
+      <header class="flex items-start gap-3">
+        <span
+          class="flex size-9 shrink-0 items-center justify-center rounded-lg bg-primary/10 text-primary"
+        >
+          <UIcon :name="info.icon" class="size-5" />
+        </span>
+        <div class="min-w-0 flex-1">
+          <h3 class="truncate text-base font-semibold text-highlighted">
+            {{ tx(info.label) }}
+          </h3>
+          <p v-if="description" class="text-sm text-muted">
+            {{ description }}
+          </p>
+        </div>
+      </header>
+
+      <UButton
+        v-if="parent"
+        :label="
+          t('docs.editor.selectParent', {
+            name: tx(editor.describe(parent).label),
+          })
+        "
+        icon="i-lucide-corner-left-up"
+        color="neutral"
+        variant="link"
+        size="xs"
+        class="-mt-3 self-start p-0"
+        @click="editor.select(parent.id)"
+      />
+
+      <!-- Edit as Markdown -->
+      <section v-if="rawOpen" class="flex flex-col gap-2">
+        <p class="text-sm text-muted">
+          {{ t('docs.editor.rawNote') }}
+        </p>
+        <PlutoBlockRawEditor
+          :model-value="rawMarkdown()"
+          :disabled="disabled"
+          :label="t('docs.editor.rawLabel')"
+          :live="block.kind === 'text' || block.kind === 'raw'"
+          :rows="block.kind === 'component' ? 10 : 8"
+          @update:model-value="applyRaw"
+        />
+      </section>
+
+      <!-- Text -->
+      <template v-else-if="block.kind === 'text'">
+        <PlutoBlockTextEditor
+          :key="block.id"
+          :model-value="block.markdown"
+          :disabled="disabled"
+          :label="t('docs.editor.textLabel')"
+          @update:model-value="editor.updateText(block.id, $event)"
+        />
+      </template>
+
+      <!-- Code -->
+      <template v-else-if="block.kind === 'code'">
+        <div class="grid grid-cols-2 gap-3">
+          <UFormField
+            :label="t('docs.editor.language')"
+            :help="t('docs.editor.languageHelp')"
+          >
+            <UInput
+              :model-value="block.lang"
+              :disabled="disabled"
+              list="pluto-block-languages"
+              placeholder="ts"
+              autocomplete="off"
+              spellcheck="false"
+              class="w-full"
+              @update:model-value="
+                editor.updateCode(block.id, { lang: String($event ?? '') })
+              "
+            />
+            <datalist id="pluto-block-languages">
+              <option
+                v-for="language in LANGUAGES"
+                :key="language"
+                :value="language"
+              />
+            </datalist>
+          </UFormField>
+          <UFormField
+            :label="t('docs.editor.fileName')"
+            :help="t('docs.editor.fileNameHelp')"
+          >
+            <UInput
+              :model-value="block.filename ?? ''"
+              :disabled="disabled"
+              placeholder="app.ts"
+              autocomplete="off"
+              spellcheck="false"
+              class="w-full"
+              @update:model-value="
+                editor.updateCode(block.id, {
+                  filename: String($event ?? '') || undefined,
+                })
+              "
+            />
+          </UFormField>
+        </div>
+        <UFormField :label="t('docs.editor.code')">
+          <UTextarea
+            :model-value="block.code"
+            :disabled="disabled"
+            :rows="10"
+            :maxrows="28"
+            :ui="{ base: 'font-mono text-sm/6' }"
+            spellcheck="false"
+            autocomplete="off"
+            autocapitalize="off"
+            class="w-full"
+            autoresize
+            @update:model-value="
+              editor.updateCode(block.id, { code: String($event ?? '') })
+            "
+          />
+        </UFormField>
+      </template>
+
+      <!-- Markdown (raw) -->
+      <template v-else-if="block.kind === 'raw'">
+        <UAlert
+          :description="
+            block.reason === 'table'
+              ? t('docs.editor.tableNote')
+              : t('docs.editor.rawBlockNote')
+          "
+          color="neutral"
+          variant="subtle"
+          icon="i-lucide-info"
+        />
+        <PlutoBlockRawEditor
+          :model-value="block.markdown"
+          :disabled="disabled"
+          :label="t('docs.editor.rawLabel')"
+          :rows="12"
+          live
+          @update:model-value="editor.updateText(block.id, $event)"
+        />
+      </template>
+
+      <!-- Component -->
+      <template v-else>
+        <section v-if="slots.length" class="flex flex-col gap-4">
+          <h4 class="text-xs font-semibold uppercase tracking-wide text-muted">
+            {{ t('docs.editor.content') }}
+          </h4>
+
+          <UFormField
+            v-for="slot in slots"
+            :key="slot.name"
+            :label="slots.length > 1 ? slot.label : undefined"
+          >
+            <PlutoBlockTextEditor
+              v-if="slot.mode === 'rich'"
+              :model-value="slotMarkdown(component(), slot.name)"
+              :disabled="disabled"
+              :label="slot.label"
+              compact
+              @update:model-value="editor.setSlot(block.id, slot.name, $event)"
+            />
+
+            <UInput
+              v-else-if="slot.mode === 'inline'"
+              :model-value="slotMarkdown(component(), slot.name)"
+              :disabled="disabled"
+              :aria-label="slot.label"
+              class="w-full"
+              @update:model-value="
+                editor.setSlot(block.id, slot.name, String($event ?? ''))
+              "
+            />
+
+            <PlutoBlockRawEditor
+              v-else-if="slot.mode === 'markdown'"
+              :model-value="slotMarkdown(component(), slot.name)"
+              :disabled="disabled"
+              :label="slot.label"
+              :rows="5"
+              live
+              @update:model-value="editor.setSlot(block.id, slot.name, $event)"
+            />
+
+            <div v-else class="flex flex-col gap-1">
+              <ul v-if="slot.children.length" class="flex flex-col gap-1">
+                <li v-for="child in slot.children" :key="child.id">
+                  <button
+                    type="button"
+                    class="flex w-full items-center gap-2 rounded-md border border-default px-2 py-1.5 text-start text-sm hover:bg-elevated focus-visible:outline-2 focus-visible:outline-primary"
+                    @click="editor.select(child.id)"
+                  >
+                    <UIcon
+                      :name="childInfo(child).icon"
+                      class="size-4 shrink-0 text-muted"
+                    />
+                    <span class="min-w-0 flex-1 truncate">
+                      <span class="font-medium text-highlighted">{{
+                        childInfo(child).label
+                      }}</span>
+                      <span v-if="childInfo(child).excerpt" class="text-muted"
+                        >: {{ childInfo(child).excerpt }}</span
+                      >
+                    </span>
+                    <UIcon
+                      name="i-lucide-chevron-right"
+                      class="size-4 shrink-0 text-dimmed"
+                    />
+                  </button>
+                </li>
+              </ul>
+              <p v-else class="text-sm text-muted">
+                {{ t('docs.editor.slotEmpty') }}
+              </p>
+              <UButton
+                :label="slot.add"
+                :disabled="disabled"
+                icon="i-lucide-plus"
+                color="neutral"
+                variant="outline"
+                size="xs"
+                class="self-start"
+                @click="addTo(slot.name)"
+              />
+            </div>
+          </UFormField>
+        </section>
+
+        <section v-if="settings.length" class="flex flex-col gap-4">
+          <h4 class="text-xs font-semibold uppercase tracking-wide text-muted">
+            {{ t('docs.editor.settings') }}
+          </h4>
+          <PlutoBlockPropControl
+            v-for="[name, prop] in settings"
+            :key="name"
+            :name="name"
+            :definition="prop"
+            :model-value="propValue(name)"
+            :disabled="disabled"
+            @update:model-value="setPropValue(name, $event)"
+          />
+        </section>
+
+        <details
+          v-if="advanced.length"
+          class="group rounded-lg border border-default"
+        >
+          <summary
+            class="flex cursor-pointer list-none items-center gap-2 px-3 py-2 text-sm font-medium text-highlighted focus-visible:outline-2 focus-visible:outline-primary"
+          >
+            <UIcon
+              name="i-lucide-chevron-right"
+              class="size-4 text-muted transition-transform group-open:rotate-90"
+            />
+            {{ t('docs.editor.advanced') }}
+          </summary>
+          <div class="flex flex-col gap-4 border-t border-default p-3">
+            <PlutoBlockPropControl
+              v-for="[name, prop] in advanced"
+              :key="name"
+              :name="name"
+              :definition="prop"
+              :model-value="component().props[name]"
+              :disabled="disabled"
+              @update:model-value="editor.setProp(block.id, name, $event)"
+            />
+          </div>
+        </details>
+      </template>
+
+      <!-- Actions -->
+      <div class="flex flex-wrap gap-2 border-t border-default pt-4">
+        <UButton
+          :label="t('docs.editor.duplicate')"
+          :disabled="disabled"
+          icon="i-lucide-copy"
+          color="neutral"
+          variant="outline"
+          size="sm"
+          @click="editor.duplicate(block.id)"
+        />
+        <UButton
+          :label="
+            rawOpen
+              ? t('docs.editor.backToControls')
+              : t('docs.editor.editAsMarkdown')
+          "
+          :icon="rawOpen ? 'i-lucide-sliders-horizontal' : 'i-lucide-file-code'"
+          :disabled="disabled || block.kind === 'raw'"
+          color="neutral"
+          variant="outline"
+          size="sm"
+          @click="rawOpen = !rawOpen"
+        />
+        <UButton
+          :label="t('docs.editor.delete')"
+          :disabled="disabled"
+          icon="i-lucide-trash-2"
+          color="error"
+          variant="soft"
+          size="sm"
+          class="ms-auto"
+          @click="editor.remove(block.id)"
+        />
+      </div>
+    </template>
+  </div>
+</template>

package/app/components/Pluto/Docs/Blocks/PlutoBlockMarkdownSplit.vue

@@ -0,0 +1,161 @@
+<script setup lang="ts">
+// The Markdown mode of the `mdc` widget in a canvas form: the Markdown at the
+// left and the live preview at the right, side by side (stacked on a narrow
+// screen). The handle between them resizes them, and a cookie keeps the size.
+// The preview is the frame of the visual editor, so it renders with the site
+// parser. A click on a block in the preview selects the first line of that
+// block in the Markdown and scrolls to it. The Markdown editor is
+// PlutoMarkdownCodeEditor of core (CodeMirror). The Markdown is the only editor
+// here: the block model only feeds the preview and never writes.
+import type { SplitterItem } from '@nuxt/ui'
+import type { PlutoMarkdownCodeEditor as CodeEditor } from '#components'
+// The component layer. Only the two editor roots import it, so it stays out of the public pages.
+import componentBlocks from '#pluto-docs/blocks'
+import { findBlock } from '../../../../../shared/utils/blocks/tree'
+import PlutoMdcInsertMenu from '../PlutoMdcInsertMenu.vue'
+import PlutoBlockModeSwitch from './PlutoBlockModeSwitch.vue'
+import PlutoBlockPreviewFrame from './PlutoBlockPreviewFrame.vue'
+
+const props = defineProps<{
+  modelValue: string
+  disabled?: boolean
+  mode: 'visual' | 'markdown'
+  placeholder?: string
+  label?: string
+}>()
+
+const emit = defineEmits<{
+  'update:modelValue': [value: string]
+  'update:mode': [mode: 'visual' | 'markdown']
+}>()
+
+const form = usePlutoContentForm()
+const blockSources = usePlutoBlockSources(componentBlocks)
+
+const editor = createPlutoBlockEditor({
+  source: () => props.modelValue,
+  emit: () => {},
+  sources: blockSources,
+})
+provide(plutoBlockEditorKey, editor)
+
+// The front matter for the preview header: the item without the body.
+const frontmatter = computed<Record<string, unknown>>(() => {
+  const item = form?.item.value ?? {}
+  return Object.fromEntries(
+    Object.entries(item).filter(([key]) => key !== 'body')
+  )
+})
+
+const code = useTemplateRef<InstanceType<typeof CodeEditor>>('code')
+
+// --- The split ---------------------------------------------------------------------
+
+const isDesktop = useMediaQuery('(min-width: 64rem)')
+// The size of the Markdown pane, in percent of the row (desktop) or of the column (narrow).
+const splitSize = useCookie<number>('pluto-mdc-split', {
+  default: () => 50,
+  maxAge: 60 * 60 * 24 * 365,
+  sameSite: 'lax',
+})
+const MIN = 25
+const MAX = 75
+// Read once: a reactive `defaultSize` would rebuild the panels on each save of the size.
+const initialSize = Math.min(MAX, Math.max(MIN, Number(splitSize.value) || 50))
+const items: SplitterItem[] = [
+  {
+    id: 'pluto-mdc-source',
+    slot: 'source',
+    defaultSize: initialSize,
+    minSize: MIN,
+    maxSize: MAX,
+  },
+  { id: 'pluto-mdc-preview', slot: 'preview' },
+]
+
+// The pointer over the iframe goes to the frame, and the drag stops. So the preview takes no
+// pointer events while the handle moves. The size is saved when the drag ends.
+const dragging = ref(false)
+let lastLayout: number[] = []
+function onLayout(sizes: number[]) {
+  lastLayout = sizes
+}
+function onDragging(_index: number, value: boolean) {
+  dragging.value = value
+  if (!value && lastLayout[0]) {
+    splitSize.value = Math.round(lastLayout[0])
+  }
+}
+
+// A click on a block in the preview: go to that block in the Markdown.
+watch(
+  () => editor.selection.value,
+  (selection) => {
+    if (selection?.source !== 'preview') {
+      return
+    }
+    const original = findBlock(editor.doc.value, selection.id)?.block.original
+    if (original) {
+      code.value?.reveal(original.start, original.end)
+    }
+  }
+)
+</script>
+
+<template>
+  <USplitter
+    id="pluto-mdc-split"
+    :items="items"
+    :orientation="isDesktop ? 'horizontal' : 'vertical'"
+    :ui="{
+      root: 'h-full min-h-0',
+      // A 1px line. A `::before` 2.5px wider on each side is the 6px grab area,
+      // and the 6px haze-400 bar: it fades in after 300ms of hover, and shows at
+      // once while dragging. In both directions. The `!` keeps the duration and
+      // the delay against the no-transition rule of the admin (core pluto-layer.css).
+      handle:
+        'bg-(--ui-border) data-[orientation=horizontal]:w-px data-[orientation=vertical]:h-px before:absolute before:z-10 before:transition-colors before:duration-150! hover:before:bg-haze-400 hover:before:delay-300! data-[resize-handle-state=drag]:before:bg-haze-400 data-[resize-handle-state=drag]:before:delay-0! data-[orientation=horizontal]:before:inset-y-0 data-[orientation=horizontal]:before:inset-x-[-2.5px] data-[orientation=vertical]:before:inset-x-0 data-[orientation=vertical]:before:inset-y-[-2.5px]',
+    }"
+    data-block-canvas
+    @layout="onLayout"
+    @dragging="onDragging"
+  >
+    <!-- The source pane: the code editor, and the mode switch in a fixed footer, as in the Visual mode. -->
+    <template #source>
+      <div class="flex size-full min-h-0 flex-col">
+        <div class="min-h-0 flex-1 p-4">
+          <PlutoMarkdownCodeEditor
+            ref="code"
+            :model-value="modelValue"
+            :disabled="disabled"
+            :placeholder="placeholder"
+            :aria-label="label"
+            fill
+            @update:model-value="emit('update:modelValue', $event)"
+          >
+            <template #toolbar="{ insert }">
+              <PlutoMdcInsertMenu :insert="insert" :disabled="disabled" />
+            </template>
+          </PlutoMarkdownCodeEditor>
+        </div>
+        <div
+          class="flex shrink-0 items-center justify-between gap-2 border-t border-default px-3 py-2"
+        >
+          <PlutoBlockModeSwitch
+            :mode="mode"
+            :disabled="disabled"
+            @update:mode="emit('update:mode', $event)"
+          />
+        </div>
+      </div>
+    </template>
+
+    <template #preview>
+      <PlutoBlockPreviewFrame
+        :frontmatter="frontmatter"
+        :class="{ 'pointer-events-none': dragging }"
+        class="size-full"
+      />
+    </template>
+  </USplitter>
+</template>