@phis/ui 0.4.1 → 0.4.2

package/components/widgets/shared/markdown-body-client.d.ts

@@ -1,6 +1,6 @@
 import type { PhiClientBlockBaseProps, PhiNoLabels } from "../../../types";
 import type { PhiCodeToken } from "./markdown-code-tokens";
-import type { PhiMarkdownTextAlign } from "../../../types/core-widget-placements";
+import type { PhiMarkdownImageFloat, PhiMarkdownTextAlign } from "../../../types/core-widget-placements";
 import { type PhiSpacingScaleKey } from "../config/spacing-options";
 import type { PhiMarkdownTocHeading } from "../../../types/markdown";
 import { type PhiBulletListStyle } from "./bullet-list-vocabulary";
@@ -75,6 +75,7 @@ export type PhiMarkdownWidgetClientProps = PhiClientBlockBaseProps<PhiNoLabels,
     tocKey?: string;
     headings?: PhiMarkdownTocHeading[];
     textAlign?: PhiMarkdownTextAlign;
+    imageFloat?: PhiMarkdownImageFloat;
     textBlockSpacingBefore?: PhiSpacingScaleKey;
     textBlockSpacingAfter?: PhiSpacingScaleKey;
     headingBlockSpacingBefore?: PhiSpacingScaleKey;

package/components/widgets/shared/markdown-body-client.js

@@ -162,7 +162,9 @@ export function PhiMarkdownWidgetClient({ config }) {
         marginBlockStart: resolvePhiSpacingScaleValue(config?.headingBlockSpacingBefore ?? "none"),
         marginBlockEnd: resolvePhiSpacingScaleValue(config?.headingBlockSpacingAfter ?? "sm"),
     };
-    return (_jsx("div", { style: { display: "grid", gap: 0, width: "100%", textAlign: config?.textAlign }, children: renderBlocks(blocks, token, paragraphBlockStyle, headingBlockStyle, {
+    return (_jsx("div", { className: config?.imageFloat ? `phi-markdown-body phi-markdown-body--float-${config.imageFloat}` : undefined, style: config?.imageFloat
+            ? { display: "flow-root", width: "100%", textAlign: config.textAlign, containerType: "inline-size" }
+            : { display: "grid", gap: 0, width: "100%", textAlign: config?.textAlign }, children: renderBlocks(blocks, token, paragraphBlockStyle, headingBlockStyle, {
             style: resolvePhiBulletListStyle(config?.list),
             depth: 1,
         }) }));

package/components/widgets/shared/markdown-render.js

@@ -56,6 +56,13 @@ function normalizePotentialPhiScheme(value) {
  * accepted let `javascript:` and `data:` through here while the inline path refused them.
  */
 const PHI_EXTERNAL_DOCUMENT_URL_SCHEMES = /^(?:https?:|mailto:|tel:)$/iu;
+/*
+ * A picture written into the text itself may also be a data URL of an image type -- the one way a Module
+ * brings a drawing with its copy, since it cannot put a file into the Site's `public/`. An `<img>` runs
+ * nothing it loads, an SVG's scripts included, so the type list is what keeps this a picture. Links
+ * stay on the scheme list above, and a fetched document gets no data URLs at all.
+ */
+const PHI_INLINE_IMAGE_DATA_URL = /^data:image\/(?:png|jpeg|gif|webp|svg\+xml)[;,]/iu;
 function resolveExternalDocumentUrl(value, sourceUrl) {
     const normalized = value.trim();
     if (!normalized || normalizePotentialPhiScheme(normalized).startsWith("phis:"))
@@ -119,7 +126,7 @@ async function projectInternalMarkdownNodes(tree, runtime) {
                 const src = resolved.assetUrls.get(reference.assetId);
                 return src ? [{ ...node, url: src, children }] : [];
             }
-            if (!/^https?:/iu.test(node.url ?? ""))
+            if (!/^https?:/iu.test(node.url ?? "") && !PHI_INLINE_IMAGE_DATA_URL.test(node.url ?? ""))
                 return [];
             return [{ ...node, children }];
         }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@phis/ui",
-  "version": "0.4.1",
+  "version": "0.4.2",
   "license": "Apache-2.0",
   "publishConfig": {
     "access": "public"

package/plugins/runtime-modules/core/widgets/markdown/config.d.ts

@@ -1,4 +1,4 @@
-import type { PhiMarkdownTextAlign } from "../../../../../types/core-widget-placements";
+import type { PhiMarkdownImageFloat, PhiMarkdownTextAlign } from "../../../../../types/core-widget-placements";
 import { type PhiSpacingScaleKey } from "../../../../../components/widgets/config/spacing-options";
 import type { PhiCmsResolvedContent } from "../../../../../types/cms";
 import { type PhiBulletListStyle } from "../../../../../components/widgets/shared/bullet-list-vocabulary";
@@ -13,6 +13,8 @@ export type PhiCmsMarkdownWidgetConfig = PhiCmsWidgetConfigBase & {
     /** Set at render from the node's `NoTranslate` flag, or by a caller that knows; never authored. */
     translate?: boolean;
     textAlign?: PhiMarkdownTextAlign;
+    /** Pictures stand at this edge and the text flows past them; absent, a picture is a line of its own. */
+    imageFloat?: PhiMarkdownImageFloat;
     textBlockSpacingBefore?: PhiSpacingScaleKey;
     textBlockSpacingAfter?: PhiSpacingScaleKey;
     headingBlockSpacingBefore?: PhiSpacingScaleKey;

package/plugins/runtime-modules/core/widgets/markdown/config.js

@@ -9,6 +9,13 @@ const PHI_MARKDOWN_TEXT_ALIGN_OPTIONS = [
     { value: "end", label: "End" },
     { value: "justify", label: "Justify" },
 ];
+const PHI_MARKDOWN_IMAGE_FLOAT_OPTIONS = [
+    { value: "start", label: "Start" },
+    { value: "end", label: "End" },
+];
+function readMarkdownImageFloat(value) {
+    return value === "start" || value === "end" ? value : undefined;
+}
 // The one spacing scale every padding and gap speaks (`theme/phi-tokens.ts`), stored by its key.
 const PHI_MARKDOWN_SPACING_OPTIONS = PHI_SPACING_SCALE_KEYS.map((key) => ({ value: key, label: key }));
 function readMarkdownSourceMode(value) {
@@ -41,6 +48,7 @@ export function parsePhiCmsMarkdownWidgetConfig(config) {
         sourceLocale: readString(config.sourceLocale),
         revalidateSeconds: readNumber(config.revalidateSeconds),
         textAlign: readMarkdownTextAlign(config.textAlign),
+        imageFloat: readMarkdownImageFloat(config.imageFloat),
         textBlockSpacingBefore: readMarkdownSpacingKey(config.textBlockSpacingBefore),
         textBlockSpacingAfter: readMarkdownSpacingKey(config.textBlockSpacingAfter),
         headingBlockSpacingBefore: readMarkdownSpacingKey(config.headingBlockSpacingBefore),
@@ -115,6 +123,12 @@ export const PHI_MARKDOWN_WIDGET_DEFINITION = {
             label: "Align",
             options: PHI_MARKDOWN_TEXT_ALIGN_OPTIONS,
         },
+        {
+            key: "imageFloat",
+            type: "choice",
+            label: "Image Float",
+            options: PHI_MARKDOWN_IMAGE_FLOAT_OPTIONS,
+        },
         {
             key: "textBlockSpacingBefore",
             type: "choice",

package/styles/controls.css

@@ -598,3 +598,29 @@ h5.phi-typography, .phi-typography h5 {
 .phi-plain-table tbody tr:last-child td {
   border-block-end: none;
 }
+
+/*
+ * Markdown pictures the text flows past (`imageFloat` on the Markdown Widget).
+ *
+ * Only where there is room for both: below 560px a picture beside the words leaves each of them a column
+ * nobody reads, so there the picture stands on its own line at full width, as an unfloated one does. The
+ * width is a share of the text with a ceiling, so a wide column does not grow the picture past a glance.
+ */
+.phi-markdown-body :is(img) {
+  display: block;
+  margin-block-end: var(--ant-margin, 16px);
+}
+
+@container (min-width: 560px) {
+  .phi-markdown-body--float-start :is(img) {
+    float: inline-start;
+    width: min(45%, 440px);
+    margin-inline-end: var(--ant-margin-lg, 24px);
+  }
+
+  .phi-markdown-body--float-end :is(img) {
+    float: inline-end;
+    width: min(45%, 440px);
+    margin-inline-start: var(--ant-margin-lg, 24px);
+  }
+}

package/types/core-widget-placements.d.ts

@@ -42,6 +42,8 @@ export type PhiWidgetPlacementSignalRoutes = {
 type PhiControlPlacement = Omit<PhiControlConfig, "signalRoutes">;
 /** Logical, not left and right: a Site in an RTL locale reads "start" as the right-hand edge. */
 export type PhiMarkdownTextAlign = "start" | "center" | "end" | "justify";
+/** Which edge the text's pictures stand at, with the words flowing past them; logical like the align. */
+export type PhiMarkdownImageFloat = "start" | "end";
 export type PhiMarkdownWidgetPlacement = PhiWidgetPlacementBase & {
     sourceMode?: "inline" | "url";
     markdown?: string;
@@ -49,6 +51,7 @@ export type PhiMarkdownWidgetPlacement = PhiWidgetPlacementBase & {
     sourceLocale?: string;
     revalidateSeconds?: number;
     textAlign?: PhiMarkdownTextAlign;
+    imageFloat?: PhiMarkdownImageFloat;
     textBlockSpacingBefore?: PhiSpacingScaleKey;
     textBlockSpacingAfter?: PhiSpacingScaleKey;
     headingBlockSpacingBefore?: PhiSpacingScaleKey;