Default embed header

aguingand · aguingand · commit 130fa67210c2 · 2025-01-23T11:02:38.000+01:00
diff --git a/demo/app/Sharp/Utils/Embeds/RelatedPostEmbed.php b/demo/app/Sharp/Utils/Embeds/RelatedPostEmbed.php
@@ -15,14 +15,14 @@ public function buildEmbedConfig(): void
         $this
             ->configureLabel('Related Post')
             ->configureTagName('x-related-post')
+            ->configureIcon('fas-link')
             ->configureTemplate(<<<'blade'
                 <div style="display: flex; gap: .5rem; align-items: center">
                     @if($online)
                         <span style="color: blue">●</span>
                     @else
                         <span style="color: orange">●</span>
                     @endif
-                    <x-fas-link style="width: 1rem; height: 1rem" />
                     <em>{{ $title }}</em>
                 </div>
                 blade
diff --git a/demo/app/Sharp/Utils/Embeds/TableOfContentsEmbed.php b/demo/app/Sharp/Utils/Embeds/TableOfContentsEmbed.php
@@ -10,8 +10,7 @@ class TableOfContentsEmbed extends SharpFormEditorEmbed
     public function buildEmbedConfig(): void
     {
         $this->configureLabel('Table of contents')
-            ->configureTagName('x-table-of-contents')
-            ->configureTemplate('<em>- Table of contents -</em>');
+            ->configureTagName('x-table-of-contents');
     }
 
     public function buildFormFields(FieldsContainer $formFields): void {}
diff --git a/docs/guide/form-editor-embeds.md b/docs/guide/form-editor-embeds.md
@@ -61,7 +61,8 @@ This is not required, but you should implement `buildEmbedConfig(): void`, where
 - `configureTemplate(string|View $template): self`: to define the blade as inline string or as a `view('my-template')` for both show & form. If you want to specify different templates between show & form you can use following methods :
   - `configureShowTemplate(string|View $template): self`
   - `configureFormTemplate(string|View $template): self`
-- `configureIcon(string $icon): self` define icon, place it in toolbar...
+- `configureIcon(string $icon): self`: to define an icon used when the embed is placed in the toolbar. The icon is also displayed in the embed header.
+- `configureDisplayEmbedHeader(bool $display = true, ?string $title = null): self`: to hide the default embed header. The title is the label defined in `configureLabel()` but it can be overridden here.
 
 Here's a complete example:
 
diff --git a/resources/css/content.css b/resources/css/content.css
@@ -65,7 +65,7 @@
       @apply relative p-1.5 -m-1.5 text-primary underline underline-offset-4 decoration-primary/20 hover:decoration-inherit;
     }
     :where(strong) {
-      @apply font-bold;
+      @apply font-[650];
     }
     > :where(:first-child) {
       @apply mt-0;
diff --git a/resources/js/components/EmbedHeader.vue b/resources/js/components/EmbedHeader.vue
@@ -0,0 +1,19 @@
+<script setup lang="ts">
+    import { EmbedData } from "@/types";
+    import Icon from "@/components/ui/Icon.vue";
+
+    defineProps<{
+        embed: EmbedData,
+    }>()
+</script>
+
+<template>
+    <div class="flex mb-3 -mt-0.5 items-center gap-2 only:my-0" data-embed-title>
+        <template v-if="embed.icon">
+            <Icon class="size-3 text-accent-foreground" :icon="embed.icon" />
+        </template>
+        <h3 class="flex-1 min-w-0 truncate text-xs font-medium text-accent-foreground">
+            {{ embed.embedHeaderTitle || embed.label }}
+        </h3>
+    </div>
+</template>
diff --git a/resources/js/form/components/fields/editor/extensions/embed/EmbedNode.vue b/resources/js/form/components/fields/editor/extensions/embed/EmbedNode.vue
@@ -13,6 +13,7 @@
         DropdownMenuTrigger
     } from "@/components/ui/dropdown-menu";
     import { MoreHorizontal } from "lucide-vue-next";
+    import EmbedHeader from "@/components/EmbedHeader.vue";
 
     const props = defineProps<ExtensionNodeProps<typeof Embed, EmbedNodeAttributes>>();
 
@@ -43,12 +44,13 @@
         :class="{ 'group-focus/editor:border-primary': props.selected }"
         :node="node"
     >
-        <div class="flex-1" >
-            <template v-if="embedData">
-                <div v-html="embedData?._html"></div>
+        <div class="flex-1 min-w-0">
+            <template v-if="extension.options.embed.displayEmbedHeader">
+                <EmbedHeader :embed="extension.options.embed" />
             </template>
-            <template v-else>
-                {{ extension.options.embed.label }}
+
+            <template v-if="embedData?._html">
+                <div v-html="embedData?._html"></div>
             </template>
         </div>
         <template v-if="!parentEditor.props.field.readOnly">
diff --git a/resources/js/show/components/fields/text/nodes/Embed.vue b/resources/js/show/components/fields/text/nodes/Embed.vue
@@ -3,6 +3,7 @@
     import { ContentEmbedManager } from "@/content/ContentEmbedManager";
     import { Show } from "@/show/Show";
     import { EmbedData } from "@/types";
+    import EmbedHeader from "@/components/EmbedHeader.vue";
     const props = defineProps<{
         embed: EmbedData,
     }>();
@@ -12,12 +13,13 @@
 </script>
 
 <template>
-    <div class="my-4 first:mt-0 last:mb-0 bg-background border rounded-md p-4">
-        <component
-            v-if="embedData"
-            :is="embed.tag"
-            v-html="embedData._html"
-        />
-    </div>
+    <component :is="embed.tag" class="block my-4 first:mt-0 last:mb-0 bg-background border rounded-md p-4">
+        <template v-if="embed.displayEmbedHeader">
+            <EmbedHeader :embed="embed" />
+        </template>
+        <template v-if="embedData?._html">
+            <div v-html="embedData._html"></div>
+        </template>
+    </component>
 </template>
 
diff --git a/resources/js/types/generated.d.ts b/resources/js/types/generated.d.ts
@@ -114,6 +114,8 @@ export type EmbedData = {
   icon: IconData | null;
   attributes: Array<string>;
   fields: { [key: string]: FormFieldData };
+  displayEmbedHeader: boolean;
+  embedHeaderTitle: string | null;
 };
 export type EmbedFormData = {
   data: { [key: string]: FormFieldData["value"] };
@@ -143,13 +145,13 @@ export type EntityListConfigData = {
   state: EntityStateData | null;
 };
 export type EntityListData = {
+  title: string | null;
   authorizations: EntityListAuthorizationsData;
   config: EntityListConfigData;
   fields: Array<EntityListFieldData>;
   data: Array<{ [key: string]: any }>;
   filterValues: FilterValuesData;
   query: EntityListQueryParamsData | null;
-  title: string | null;
   forms: { [key: string]: EntityListMultiformData } | null;
   meta: PaginatorMetaData | null;
   pageAlert: PageAlertData | null;
@@ -288,13 +290,13 @@ export type FormCustomFieldData = {
   extraStyle: string | null;
 };
 export type FormData = {
+  title: string | null;
   authorizations: InstanceAuthorizationsData;
   config: FormConfigData;
   data: { [key: string]: FormFieldData["value"] };
   fields: { [key: string]: FormFieldData };
   layout: FormLayoutData;
   locales: Array<string>;
-  title: string | null;
   pageAlert: PageAlertData | null;
 };
 export type FormDateFieldData = {
@@ -756,13 +758,13 @@ export type ShowCustomFieldData = {
   emptyVisible: boolean;
 };
 export type ShowData = {
+  title: string | { [locale: string]: string } | null;
   authorizations: InstanceAuthorizationsData;
   config: ShowConfigData;
   data: { [key: string]: ShowFieldData["value"] };
   fields: { [key: string]: ShowFieldData };
   layout: ShowLayoutData;
   locales: Array<string> | null;
-  title: string | { [locale: string]: string } | null;
   pageAlert: PageAlertData | null;
 };
 export type ShowEntityListFieldData = {
diff --git a/resources/js/types/routes.d.ts b/resources/js/types/routes.d.ts
@@ -24,7 +24,8 @@ declare module 'ziggy-js' {
     ],
     "code16.sharp.single-show": [
         {
-            "name": "entityKey"
+            "name": "entityKey",
+            "binding": "key"
         }
     ],
     "code16.sharp.download.show": [
@@ -40,7 +41,8 @@ declare module 'ziggy-js' {
             "name": "parentUri"
         },
         {
-            "name": "entityKey"
+            "name": "entityKey",
+            "binding": "key"
         },
         {
             "name": "instanceId"
@@ -62,23 +64,26 @@ declare module 'ziggy-js' {
             "name": "parentUri"
         },
         {
-            "name": "entityKey"
+            "name": "entityKey",
+            "binding": "key"
         }
     ],
     "code16.sharp.form.store": [
         {
             "name": "parentUri"
         },
         {
-            "name": "entityKey"
+            "name": "entityKey",
+            "binding": "key"
         }
     ],
     "code16.sharp.form.edit": [
         {
             "name": "parentUri"
         },
         {
-            "name": "entityKey"
+            "name": "entityKey",
+            "binding": "key"
         },
         {
             "name": "instanceId"
@@ -89,7 +94,8 @@ declare module 'ziggy-js' {
             "name": "parentUri"
         },
         {
-            "name": "entityKey"
+            "name": "entityKey",
+            "binding": "key"
         },
         {
             "name": "instanceId"
@@ -118,12 +124,14 @@ declare module 'ziggy-js' {
     ],
     "code16.sharp.api.list.command.quick-creation-form.create": [
         {
-            "name": "entityKey"
+            "name": "entityKey",
+            "binding": "key"
         }
     ],
     "code16.sharp.api.list.command.quick-creation-form.store": [
         {
-            "name": "entityKey"
+            "name": "entityKey",
+            "binding": "key"
         }
     ],
     "code16.sharp.api.list": [
@@ -291,7 +299,8 @@ declare module 'ziggy-js' {
     "code16.sharp.api.form.upload": [],
     "code16.sharp.api.form.autocomplete.index": [
         {
-            "name": "entityKey"
+            "name": "entityKey",
+            "binding": "key"
         },
         {
             "name": "autocompleteFieldKey"
diff --git a/src/Data/Embeds/EmbedData.php b/src/Data/Embeds/EmbedData.php
@@ -26,6 +26,8 @@ public function __construct(
         public array $attributes,
         /** @var array<string,FormFieldData> */
         public array $fields,
+        public bool $displayEmbedHeader,
+        public ?string $embedHeaderTitle,
     ) {}
 
     public static function from(array $embed): self
diff --git a/src/Form/Fields/Embeds/SharpFormEditorEmbed.php b/src/Form/Fields/Embeds/SharpFormEditorEmbed.php
@@ -33,6 +33,8 @@ abstract class SharpFormEditorEmbed
     protected ?string $icon = null;
     protected string|View|null $showTemplate = null;
     protected string|View|null $formTemplate = null;
+    protected bool $displayEmbedHeader = true;
+    protected ?string $embedHeaderTitle = null;
 
     public function toConfigArray(bool $isForm): array
     {
@@ -43,6 +45,8 @@ public function toConfigArray(bool $isForm): array
             'attributes' => collect($this->fields())->keys()->toArray(),
             'icon' => app(IconManager::class)->iconToArray($this->icon),
             'fields' => $this->fields(),
+            'displayEmbedHeader' => $this->displayEmbedHeader,
+            'embedHeaderTitle' => $this->embedHeaderTitle ?: $this->label,
         ];
 
         $this->validate($config, [
@@ -181,6 +185,14 @@ final protected function configureShowTemplate(string|View $template): self
 
         return $this;
     }
+    
+    final protected function configureDisplayEmbedHeader(bool $display = true, ?string $title = null): self
+    {
+        $this->displayEmbedHeader = $display;
+        $this->embedHeaderTitle = $title;
+
+        return $this;
+    }
 
     final public function transformDataWithRenderedTemplate(array $data, bool $isForm): array
     {
@@ -197,7 +209,7 @@ private function renderTemplate(array $data, bool $isForm): string
         $template = $isForm ? $this->formTemplate : $this->showTemplate;
 
         if (! $template) {
-            return 'Empty template';
+            return '';
         }
 
         if (isset($data['slot'])) {

Original file line number	Diff line number	Diff line change
`@@ -10,8 +10,7 @@ class TableOfContentsEmbed extends SharpFormEditorEmbed`
`10`	`10`	`public function buildEmbedConfig(): void`
`11`	`11`	`{`
`12`	`12`	`$this->configureLabel('Table of contents')`
`13`		`- ->configureTagName('x-table-of-contents')`
`14`		`- ->configureTemplate('<em>- Table of contents -</em>');`
	`13`	`+ ->configureTagName('x-table-of-contents');`
`15`	`14`	`}`
`16`	`15`
`17`	`16`	`public function buildFormFields(FieldsContainer $formFields): void {}`
Original file line number	Diff line number	Diff line change
`@@ -65,7 +65,7 @@`
`65`	`65`	`@apply relative p-1.5 -m-1.5 text-primary underline underline-offset-4 decoration-primary/20 hover:decoration-inherit;`
`66`	`66`	`}`
`67`	`67`	`:where(strong) {`
`68`		`- @apply font-bold;`
	`68`	`+ @apply font-[650];`
`69`	`69`	`}`
`70`	`70`	`> :where(:first-child) {`
`71`	`71`	`@apply mt-0;`
Original file line number	Diff line number	Diff line change
`@@ -24,7 +24,8 @@ declare module 'ziggy-js' {`
`24`	`24`	`],`
`25`	`25`	`"code16.sharp.single-show": [`
`26`	`26`	`{`
`27`		`- "name": "entityKey"`
	`27`	`+ "name": "entityKey",`
	`28`	`+ "binding": "key"`
`28`	`29`	`}`
`29`	`30`	`],`
`30`	`31`	`"code16.sharp.download.show": [`
`@@ -40,7 +41,8 @@ declare module 'ziggy-js' {`
`40`	`41`	`"name": "parentUri"`
`41`	`42`	`},`
`42`	`43`	`{`
`43`		`- "name": "entityKey"`
	`44`	`+ "name": "entityKey",`
	`45`	`+ "binding": "key"`
`44`	`46`	`},`
`45`	`47`	`{`
`46`	`48`	`"name": "instanceId"`
`@@ -62,23 +64,26 @@ declare module 'ziggy-js' {`
`62`	`64`	`"name": "parentUri"`
`63`	`65`	`},`
`64`	`66`	`{`
`65`		`- "name": "entityKey"`
	`67`	`+ "name": "entityKey",`
	`68`	`+ "binding": "key"`
`66`	`69`	`}`
`67`	`70`	`],`
`68`	`71`	`"code16.sharp.form.store": [`
`69`	`72`	`{`
`70`	`73`	`"name": "parentUri"`
`71`	`74`	`},`
`72`	`75`	`{`
`73`		`- "name": "entityKey"`
	`76`	`+ "name": "entityKey",`
	`77`	`+ "binding": "key"`
`74`	`78`	`}`
`75`	`79`	`],`
`76`	`80`	`"code16.sharp.form.edit": [`
`77`	`81`	`{`
`78`	`82`	`"name": "parentUri"`
`79`	`83`	`},`
`80`	`84`	`{`
`81`		`- "name": "entityKey"`
	`85`	`+ "name": "entityKey",`
	`86`	`+ "binding": "key"`
`82`	`87`	`},`
`83`	`88`	`{`
`84`	`89`	`"name": "instanceId"`
`@@ -89,7 +94,8 @@ declare module 'ziggy-js' {`
`89`	`94`	`"name": "parentUri"`
`90`	`95`	`},`
`91`	`96`	`{`
`92`		`- "name": "entityKey"`
	`97`	`+ "name": "entityKey",`
	`98`	`+ "binding": "key"`
`93`	`99`	`},`
`94`	`100`	`{`
`95`	`101`	`"name": "instanceId"`
`@@ -118,12 +124,14 @@ declare module 'ziggy-js' {`
`118`	`124`	`],`
`119`	`125`	`"code16.sharp.api.list.command.quick-creation-form.create": [`
`120`	`126`	`{`
`121`		`- "name": "entityKey"`
	`127`	`+ "name": "entityKey",`
	`128`	`+ "binding": "key"`
`122`	`129`	`}`
`123`	`130`	`],`
`124`	`131`	`"code16.sharp.api.list.command.quick-creation-form.store": [`
`125`	`132`	`{`
`126`		`- "name": "entityKey"`
	`133`	`+ "name": "entityKey",`
	`134`	`+ "binding": "key"`
`127`	`135`	`}`
`128`	`136`	`],`
`129`	`137`	`"code16.sharp.api.list": [`
`@@ -291,7 +299,8 @@ declare module 'ziggy-js' {`
`291`	`299`	`"code16.sharp.api.form.upload": [],`
`292`	`300`	`"code16.sharp.api.form.autocomplete.index": [`
`293`	`301`	`{`
`294`		`- "name": "entityKey"`
	`302`	`+ "name": "entityKey",`
	`303`	`+ "binding": "key"`
`295`	`304`	`},`
`296`	`305`	`{`
`297`	`306`	`"name": "autocompleteFieldKey"`