@threadlabs/looma 0.28.6 → 0.28.7

package/components/ui-editor-block-actions/ui-editor-block-actions.html

@@ -0,0 +1,20 @@
+<link rel="component" href="../ui-menu/ui-menu.html">
+<link rel="component" href="../ui-menu-item/ui-menu-item.html">
+<template component="ui-editor-block-actions" controller="./ui-editor-block-actions.js">
+  <defs>
+    <prop name="for" type="string" default="">The id of the button that opens the menu and anchors it.</prop>
+    <prop name="placement" type="keyword" values="bottom-start, top-start" default="bottom-start"
+    >Where the menu opens beside its button; top-start suits a toolbar docked at the bottom of the screen.</prop>
+    <event name="action" type="object">
+      <prop name="action" required type="keyword" values="insert-below, duplicate, delete"></prop>
+      Requests an action on the block that holds the caret.
+    </event>
+  </defs>
+  <div>
+    <ui-menu from:for="$for" from:placement="$placement" aria-label="Block actions">
+      <ui-menu-item value="insert-below">Insert paragraph below</ui-menu-item>
+      <ui-menu-item value="duplicate">Duplicate block</ui-menu-item>
+      <ui-menu-item value="delete">Delete block</ui-menu-item>
+    </ui-menu>
+  </div>
+</template>

package/components/ui-editor-block-actions/ui-editor-block-actions.js

@@ -0,0 +1,14 @@
+// Reports the menu's choice as a block action.
+function connect(host) {
+  const element = host.element;
+  const onSelect = (event) => {
+    if (event.target !== element && element.contains(event.target)) host.dispatch("action", { action: event.detail.value });
+  };
+  element.addEventListener("select", onSelect);
+  return () => element.removeEventListener("select", onSelect);
+}
+
+/** Keep DOM setup and its cleanup tied to each connection, including reconnects. */
+export default function controller(host) {
+  host.on("connect", () => connect(host));
+}

package/components/ui-editor-image-toolbar/ui-editor-image-toolbar.html

@@ -31,6 +31,8 @@
   </defs>
   <div>
     <ui-text as="div" font="sans">
+      <!-- from:floating="true": a bare boolean converts to floating="" in Vue (HTML Next gap 2). data-image-*: the root reflects
+        props as data-<prop>, so data-placement would collide (gap 4). html-next #236 fixes both for the next alpha. -->
       <ui-editor-toolbar from:floating="true" aria-label="Image actions">
         <ui-icon-button
           from:id="concat($base, '-block')"
@@ -39,7 +41,7 @@
           data-image-placement="block"
           from:variant="{ true: 'outline', false: 'ghost' }[concat($placement = 'block')]"
           from:aria-pressed="concat($placement = 'block')"
-        ><ui-icon name="panel-top" size="sm"></ui-icon></ui-icon-button>
+        ><ui-icon name="panel-top"></ui-icon></ui-icon-button>
         <ui-icon-button
           from:id="concat($base, '-center')"
           label="Center image"
@@ -47,7 +49,7 @@
           data-image-placement="center"
           from:variant="{ true: 'outline', false: 'ghost' }[concat($placement = 'center')]"
           from:aria-pressed="concat($placement = 'center')"
-        ><ui-icon name="align-center" size="sm"></ui-icon></ui-icon-button>
+        ><ui-icon name="align-center"></ui-icon></ui-icon-button>
         <ui-icon-button
           from:id="concat($base, '-wrap-left')"
           label="Wrap text to the right"
@@ -55,7 +57,7 @@
           data-image-placement="wrap-left"
           from:variant="{ true: 'outline', false: 'ghost' }[concat($placement = 'wrap-left')]"
           from:aria-pressed="concat($placement = 'wrap-left')"
-        ><ui-icon name="panel-left" size="sm"></ui-icon></ui-icon-button>
+        ><ui-icon name="panel-left"></ui-icon></ui-icon-button>
         <ui-icon-button
           from:id="concat($base, '-wrap-right')"
           label="Wrap text to the left"
@@ -63,11 +65,10 @@
           data-image-placement="wrap-right"
           from:variant="{ true: 'outline', false: 'ghost' }[concat($placement = 'wrap-right')]"
           from:aria-pressed="concat($placement = 'wrap-right')"
-        ><ui-icon name="panel-right" size="sm"></ui-icon></ui-icon-button>
-        <ui-icon-button from:id="$base" label="Image description" size="sm" variant="ghost"><ui-icon name="file-text" size="sm"></ui-icon></ui-icon-button>
+        ><ui-icon name="panel-right"></ui-icon></ui-icon-button>
+        <ui-icon-button from:id="$base" label="Image description" size="sm" variant="ghost"><ui-icon name="file-text"></ui-icon></ui-icon-button>
         <ui-icon-button from:id="concat($base, '-delete')" label="Delete image" size="sm" variant="ghost" data-image-action="delete"><ui-icon
             name="trash"
-            size="sm"
           ></ui-icon></ui-icon-button>
       </ui-editor-toolbar>
       <ui-tooltip from:for="concat($base, '-block')">Image in line</ui-tooltip>

package/components/ui-editor-image-toolbar/ui-editor-image-toolbar.js

@@ -4,7 +4,8 @@ function connect(host) {
   const element = host.element;
   if (host.state.base === "ui-editor-image-toolbar") host.state.base = `ui-editor-image-toolbar-${Math.random().toString(36).slice(2, 11)}`;
   let target = null;
-  // Marked by attribute: the converted Vue component's host.refs has no entry for a nested component.
+  // Marked by attribute: the converted Vue component's host.refs has no entry for a nested component
+  // (HTML Next gap 1, fixed by html-next #236 for the next alpha).
   const isDescription = (event) => event.target.hasAttribute?.("data-image-description") && element.contains(event.target);
   const onClick = (event) => {
     const control = event.target.closest?.("[data-image-placement], [data-image-action]");

package/components/ui-editor-link-card/ui-editor-link-card.html

@@ -0,0 +1,57 @@
+<link rel="component" href="../ui-card/ui-card.html">
+<link rel="component" href="../ui-cluster/ui-cluster.html">
+<link rel="component" href="../ui-stack/ui-stack.html">
+<link rel="component" href="../ui-text/ui-text.html">
+<link rel="component" href="../ui-icon/ui-icon.html">
+<link rel="component" href="../ui-button/ui-button.html">
+<link rel="component" href="../ui-icon-button/ui-icon-button.html">
+<link rel="component" href="../ui-tooltip/ui-tooltip.html">
+<template component="ui-editor-link-card" controller="./ui-editor-link-card.js">
+  <defs>
+    <prop name="href" type="string" default="">The link's destination, shown when there is no label.</prop>
+    <prop name="openHref" type="string" default=""
+    >The address Open link opens in a new tab; without it the card offers no Open link. The editor passes the destination only when it is an http, https,
+      mailto, tel, or relative address.</prop>
+    <prop name="label" type="string" default="">The resolved destination's name, such as a page title, shown in place of the address.</prop>
+    <prop name="detail" type="string" default="">A second line under the label, such as where the destination lives.</prop>
+    <prop name="targetLabel" type="string" default="Item">What a resolved destination is called, as in "Page: Guide" for a screen reader.</prop>
+    <state name="base" type="string" value="ui-editor-link-card"></state>
+    <computed name="resolved" from="$label != ''"></computed>
+    <computed name="shown" from="{ true: $label, false: $href }[concat($resolved)]"></computed>
+    <event name="edit" type="object">Requests the link editor for this link.</event>
+    <event name="remove" type="object">Requests removing this link.</event>
+  </defs>
+  <div>
+    <ui-card variant="elevated" padding="xs" size="content">
+      <ui-cluster gap="xs" wrap="nowrap" role="group" aria-label="Link actions">
+        <ui-icon from:name="{ true: 'file-text', false: 'link' }[concat($resolved)]"></ui-icon>
+        <ui-stack gap="none" from:title="$href" from:aria-label="concat({ true: $targetLabel, false: 'URL' }[concat($resolved)], ': ', $shown)">
+          <ui-text as="strong" size="sm" weight="medium" font="sans" wrap="anywhere">{$shown}</ui-text>
+          <ui-text $if="$detail != ''" as="small" size="xs" tone="secondary" font="sans">{$detail}</ui-text>
+        </ui-stack>
+        <template $if="$openHref != ''">
+          <ui-button
+            from:id="concat($base, '-open')"
+            as="a"
+            variant="ghost"
+            tone="neutral"
+            size="sm"
+            from:href="$openHref"
+            target="_blank"
+            rel="noopener noreferrer"
+            aria-label="Open link"
+          ><ui-cluster gap="xs" wrap="nowrap"><ui-icon name="external-link"></ui-icon>Open link</ui-cluster></ui-button>
+          <ui-tooltip from:for="concat($base, '-open')">Open link</ui-tooltip>
+        </template>
+        <ui-icon-button from:id="concat($base, '-edit')" label="Edit link" variant="ghost" size="sm" data-link-action="edit"><ui-icon
+            name="pencil"
+          ></ui-icon></ui-icon-button>
+        <ui-tooltip from:for="concat($base, '-edit')">Edit link</ui-tooltip>
+        <ui-icon-button from:id="concat($base, '-remove')" label="Remove link" variant="ghost" size="sm" data-link-action="remove"><ui-icon
+            name="unlink"
+          ></ui-icon></ui-icon-button>
+        <ui-tooltip from:for="concat($base, '-remove')">Remove link</ui-tooltip>
+      </ui-cluster>
+    </ui-card>
+  </div>
+</template>

package/components/ui-editor-link-card/ui-editor-link-card.js

@@ -0,0 +1,27 @@
+// Gives each card its own tooltip ids and reports edit and remove requests without taking focus
+// from the editor.
+function connect(host) {
+  const element = host.element;
+  if (host.state.base === "ui-editor-link-card") host.state.base = `ui-editor-link-card-${Math.random().toString(36).slice(2, 11)}`;
+  const action = (event) => {
+    const control = event.target.closest?.("[data-link-action]");
+    return control && element.contains(control) ? control.dataset.linkAction : null;
+  };
+  // Keep the editor's selection while a command is pressed.
+  const onPointerDown = (event) => { if (action(event)) event.preventDefault(); };
+  const onClick = (event) => {
+    const name = action(event);
+    if (name) host.dispatch(name, {});
+  };
+  element.addEventListener("pointerdown", onPointerDown);
+  element.addEventListener("click", onClick);
+  return () => {
+    element.removeEventListener("pointerdown", onPointerDown);
+    element.removeEventListener("click", onClick);
+  };
+}
+
+/** Keep DOM setup and its cleanup tied to each connection, including reconnects. */
+export default function controller(host) {
+  host.on("connect", () => connect(host));
+}