@makeswift/runtime 0.6.1 → 0.6.2

package/dist/ReadOnlyText.cjs.js

@@ -118,7 +118,10 @@ function Block({
     "heading-four": "h4",
     "heading-five": "h5",
     "heading-six": "h6",
-    blockquote: "blockquote"
+    blockquote: "blockquote",
+    "ordered-list": "ol",
+    "unordered-list": "ul",
+    "list-item": "li"
   }[type];
   return /* @__PURE__ */ jsxRuntime.jsx(index.DeviceOverrideBlock, {
     as: component,

package/dist/ReadOnlyText.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"ReadOnlyText.cjs.js","sources":["../src/components/builtin/Text/ReadOnlyText.tsx"],"sourcesContent":["import { cx } from '@emotion/css'\nimport { ForwardedRef, forwardRef, ReactNode } from 'react'\nimport type { BlockJSON, DocumentJSON, InlineJSON, MarkJSON, NodeJSON, TextJSON } from 'slate'\nimport type {\n  ElementIDValue,\n  LinkValue,\n  RichTextValue,\n} from '../../../prop-controllers/descriptors'\nimport { useStyle } from '../../../runtimes/react/use-style'\nimport { Link } from '../../shared/Link'\nimport DeviceOverrideBlock from './components/RichTextEditor/components/Block'\nimport DeviceOverrideMark from './components/RichTextEditor/components/Mark'\n\ntype Props = {\n  id?: ElementIDValue\n  text?: RichTextValue\n  width?: string\n  margin?: string\n}\n\nconst ReadOnlyText = forwardRef(function ReadOnlyText(\n  { id, text, width, margin }: Props,\n  ref: ForwardedRef<HTMLDivElement>,\n) {\n  const plaintext = text?.document == null ? '' : getNodeText(text.document)\n\n  return (\n    <div ref={ref} id={id} className={cx(width, margin)}>\n      {plaintext === '' ? <Placeholder /> : <Node {...text?.document} />}\n    </div>\n  )\n})\n\nexport default ReadOnlyText\n\nfunction Placeholder({ text = 'Write some text...' }: { text?: string }) {\n  return (\n    <span\n      className={useStyle({\n        display: 'inline-block',\n        width: 0,\n        maxWidth: '100%',\n        whiteSpace: 'nowrap',\n        opacity: 0.333,\n        verticalAlign: 'text-top',\n      })}\n    >\n      {text}\n    </span>\n  )\n}\n\nfunction Node(props: NodeJSON) {\n  switch (props.object) {\n    case 'document':\n      return <Document {...props} />\n\n    case 'block':\n      return <Block {...props} />\n\n    case 'inline':\n      return <Inline {...props} />\n\n    case 'text':\n      return <Text {...props} />\n\n    default:\n      return null\n  }\n}\n\nfunction Document({ nodes }: DocumentJSON) {\n  return (\n    <>\n      {nodes?.map((node, idx) => (\n        <Node key={idx.toString()} {...node} />\n      ))}\n    </>\n  )\n}\n\nfunction Block({ type, data, nodes }: BlockJSON) {\n  const component = {\n    paragraph: 'p',\n    'heading-one': 'h1',\n    'heading-two': 'h2',\n    'heading-three': 'h3',\n    'heading-four': 'h4',\n    'heading-five': 'h5',\n    'heading-six': 'h6',\n    blockquote: 'blockquote',\n  }[type]\n\n  return (\n    <DeviceOverrideBlock as={component} textAlign={data?.textAlign}>\n      {nodes?.map((node, idx) => (\n        <Node key={idx.toString()} {...node} />\n      ))}\n    </DeviceOverrideBlock>\n  )\n}\n\nfunction Inline({ type, nodes, data }: InlineJSON) {\n  const children = nodes?.map((node, idx) => <Node key={idx.toString()} {...node} />)\n  const linkClassName = useStyle({ textDecoration: 'none' })\n\n  switch (type) {\n    case 'code':\n      return <code>{children}</code>\n\n    case 'superscript':\n      return <sup>{children}</sup>\n\n    case 'subscript':\n      return <sub>{children}</sub>\n\n    case 'link':\n      return (\n        <Link className={linkClassName} link={data as LinkValue | undefined}>\n          {children}\n        </Link>\n      )\n\n    default:\n      return <>{children}</>\n  }\n}\n\nfunction Text({ marks, text = '' }: TextJSON) {\n  return (\n    <>\n      {(marks ?? []).reduce(\n        (element, mark) => (\n          <Mark {...mark}>{element}</Mark>\n        ),\n        <>{text === '' ? '\\uFEFF' : text}</>,\n      )}\n    </>\n  )\n}\n\nconst TYPOGRAPHY_MARK_TYPE = 'typography'\n\nfunction Mark({ type, children, data }: MarkJSON & { children: ReactNode }) {\n  if (type !== TYPOGRAPHY_MARK_TYPE) return <>{children}</>\n\n  return <DeviceOverrideMark value={data?.value}>{children}</DeviceOverrideMark>\n}\n\nfunction getNodeText(node: NodeJSON): string {\n  switch (node.object) {\n    case 'document':\n      return node?.nodes?.map(node => getNodeText(node)).join('\\n') ?? ''\n\n    case 'block':\n      return (\n        node?.nodes\n          ?.map(node => getNodeText(node))\n          .join(node.nodes.every(node => node.object === 'block') ? '\\n' : '') ?? ''\n      )\n\n    case 'inline':\n      return node?.nodes?.map(node => getNodeText(node)).join('') ?? ''\n\n    case 'text':\n      return node.text ?? ''\n\n    default:\n      return ''\n  }\n}\n"],"names":["ReadOnlyText","forwardRef","id","text","width","margin","ref","plaintext","document","getNodeText","cx","_jsx","useStyle","display","maxWidth","whiteSpace","opacity","verticalAlign","props","object","nodes","_Fragment","map","node","idx","toString","type","data","component","paragraph","blockquote","DeviceOverrideBlock","textAlign","children","linkClassName","textDecoration","Link","marks","reduce","element","mark","TYPOGRAPHY_MARK_TYPE","DeviceOverrideMark","value","join","every"],"mappings":"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"}
+{"version":3,"file":"ReadOnlyText.cjs.js","sources":["../src/components/builtin/Text/ReadOnlyText.tsx"],"sourcesContent":["import { cx } from '@emotion/css'\nimport { ForwardedRef, forwardRef, ReactNode } from 'react'\nimport type { BlockJSON, DocumentJSON, InlineJSON, MarkJSON, NodeJSON, TextJSON } from 'slate'\nimport type {\n  ElementIDValue,\n  LinkValue,\n  RichTextValue,\n} from '../../../prop-controllers/descriptors'\nimport { useStyle } from '../../../runtimes/react/use-style'\nimport { Link } from '../../shared/Link'\nimport DeviceOverrideBlock from './components/RichTextEditor/components/Block'\nimport DeviceOverrideMark from './components/RichTextEditor/components/Mark'\n\ntype Props = {\n  id?: ElementIDValue\n  text?: RichTextValue\n  width?: string\n  margin?: string\n}\n\nconst ReadOnlyText = forwardRef(function ReadOnlyText(\n  { id, text, width, margin }: Props,\n  ref: ForwardedRef<HTMLDivElement>,\n) {\n  const plaintext = text?.document == null ? '' : getNodeText(text.document)\n\n  return (\n    <div ref={ref} id={id} className={cx(width, margin)}>\n      {plaintext === '' ? <Placeholder /> : <Node {...text?.document} />}\n    </div>\n  )\n})\n\nexport default ReadOnlyText\n\nfunction Placeholder({ text = 'Write some text...' }: { text?: string }) {\n  return (\n    <span\n      className={useStyle({\n        display: 'inline-block',\n        width: 0,\n        maxWidth: '100%',\n        whiteSpace: 'nowrap',\n        opacity: 0.333,\n        verticalAlign: 'text-top',\n      })}\n    >\n      {text}\n    </span>\n  )\n}\n\nfunction Node(props: NodeJSON) {\n  switch (props.object) {\n    case 'document':\n      return <Document {...props} />\n\n    case 'block':\n      return <Block {...props} />\n\n    case 'inline':\n      return <Inline {...props} />\n\n    case 'text':\n      return <Text {...props} />\n\n    default:\n      return null\n  }\n}\n\nfunction Document({ nodes }: DocumentJSON) {\n  return (\n    <>\n      {nodes?.map((node, idx) => (\n        <Node key={idx.toString()} {...node} />\n      ))}\n    </>\n  )\n}\n\nfunction Block({ type, data, nodes }: BlockJSON) {\n  const component = {\n    paragraph: 'p',\n    'heading-one': 'h1',\n    'heading-two': 'h2',\n    'heading-three': 'h3',\n    'heading-four': 'h4',\n    'heading-five': 'h5',\n    'heading-six': 'h6',\n    blockquote: 'blockquote',\n    'ordered-list': 'ol',\n    'unordered-list': 'ul',\n    'list-item': 'li',\n  }[type]\n\n  return (\n    <DeviceOverrideBlock as={component} textAlign={data?.textAlign}>\n      {nodes?.map((node, idx) => (\n        <Node key={idx.toString()} {...node} />\n      ))}\n    </DeviceOverrideBlock>\n  )\n}\n\nfunction Inline({ type, nodes, data }: InlineJSON) {\n  const children = nodes?.map((node, idx) => <Node key={idx.toString()} {...node} />)\n  const linkClassName = useStyle({ textDecoration: 'none' })\n\n  switch (type) {\n    case 'code':\n      return <code>{children}</code>\n\n    case 'superscript':\n      return <sup>{children}</sup>\n\n    case 'subscript':\n      return <sub>{children}</sub>\n\n    case 'link':\n      return (\n        <Link className={linkClassName} link={data as LinkValue | undefined}>\n          {children}\n        </Link>\n      )\n\n    default:\n      return <>{children}</>\n  }\n}\n\nfunction Text({ marks, text = '' }: TextJSON) {\n  return (\n    <>\n      {(marks ?? []).reduce(\n        (element, mark) => (\n          <Mark {...mark}>{element}</Mark>\n        ),\n        <>{text === '' ? '\\uFEFF' : text}</>,\n      )}\n    </>\n  )\n}\n\nconst TYPOGRAPHY_MARK_TYPE = 'typography'\n\nfunction Mark({ type, children, data }: MarkJSON & { children: ReactNode }) {\n  if (type !== TYPOGRAPHY_MARK_TYPE) return <>{children}</>\n\n  return <DeviceOverrideMark value={data?.value}>{children}</DeviceOverrideMark>\n}\n\nfunction getNodeText(node: NodeJSON): string {\n  switch (node.object) {\n    case 'document':\n      return node?.nodes?.map(node => getNodeText(node)).join('\\n') ?? ''\n\n    case 'block':\n      return (\n        node?.nodes\n          ?.map(node => getNodeText(node))\n          .join(node.nodes.every(node => node.object === 'block') ? '\\n' : '') ?? ''\n      )\n\n    case 'inline':\n      return node?.nodes?.map(node => getNodeText(node)).join('') ?? ''\n\n    case 'text':\n      return node.text ?? ''\n\n    default:\n      return ''\n  }\n}\n"],"names":["ReadOnlyText","forwardRef","id","text","width","margin","ref","plaintext","document","getNodeText","cx","_jsx","useStyle","display","maxWidth","whiteSpace","opacity","verticalAlign","props","object","nodes","_Fragment","map","node","idx","toString","type","data","component","paragraph","blockquote","DeviceOverrideBlock","textAlign","children","linkClassName","textDecoration","Link","marks","reduce","element","mark","TYPOGRAPHY_MARK_TYPE","DeviceOverrideMark","value","join","every"],"mappings":"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"}

package/dist/ReadOnlyText.es.js

@@ -116,7 +116,10 @@ function Block({
     "heading-four": "h4",
     "heading-five": "h5",
     "heading-six": "h6",
-    blockquote: "blockquote"
+    blockquote: "blockquote",
+    "ordered-list": "ol",
+    "unordered-list": "ul",
+    "list-item": "li"
   }[type];
   return /* @__PURE__ */ jsx(DeviceOverrideBlock, {
     as: component,

package/dist/ReadOnlyText.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"ReadOnlyText.es.js","sources":["../src/components/builtin/Text/ReadOnlyText.tsx"],"sourcesContent":["import { cx } from '@emotion/css'\nimport { ForwardedRef, forwardRef, ReactNode } from 'react'\nimport type { BlockJSON, DocumentJSON, InlineJSON, MarkJSON, NodeJSON, TextJSON } from 'slate'\nimport type {\n  ElementIDValue,\n  LinkValue,\n  RichTextValue,\n} from '../../../prop-controllers/descriptors'\nimport { useStyle } from '../../../runtimes/react/use-style'\nimport { Link } from '../../shared/Link'\nimport DeviceOverrideBlock from './components/RichTextEditor/components/Block'\nimport DeviceOverrideMark from './components/RichTextEditor/components/Mark'\n\ntype Props = {\n  id?: ElementIDValue\n  text?: RichTextValue\n  width?: string\n  margin?: string\n}\n\nconst ReadOnlyText = forwardRef(function ReadOnlyText(\n  { id, text, width, margin }: Props,\n  ref: ForwardedRef<HTMLDivElement>,\n) {\n  const plaintext = text?.document == null ? '' : getNodeText(text.document)\n\n  return (\n    <div ref={ref} id={id} className={cx(width, margin)}>\n      {plaintext === '' ? <Placeholder /> : <Node {...text?.document} />}\n    </div>\n  )\n})\n\nexport default ReadOnlyText\n\nfunction Placeholder({ text = 'Write some text...' }: { text?: string }) {\n  return (\n    <span\n      className={useStyle({\n        display: 'inline-block',\n        width: 0,\n        maxWidth: '100%',\n        whiteSpace: 'nowrap',\n        opacity: 0.333,\n        verticalAlign: 'text-top',\n      })}\n    >\n      {text}\n    </span>\n  )\n}\n\nfunction Node(props: NodeJSON) {\n  switch (props.object) {\n    case 'document':\n      return <Document {...props} />\n\n    case 'block':\n      return <Block {...props} />\n\n    case 'inline':\n      return <Inline {...props} />\n\n    case 'text':\n      return <Text {...props} />\n\n    default:\n      return null\n  }\n}\n\nfunction Document({ nodes }: DocumentJSON) {\n  return (\n    <>\n      {nodes?.map((node, idx) => (\n        <Node key={idx.toString()} {...node} />\n      ))}\n    </>\n  )\n}\n\nfunction Block({ type, data, nodes }: BlockJSON) {\n  const component = {\n    paragraph: 'p',\n    'heading-one': 'h1',\n    'heading-two': 'h2',\n    'heading-three': 'h3',\n    'heading-four': 'h4',\n    'heading-five': 'h5',\n    'heading-six': 'h6',\n    blockquote: 'blockquote',\n  }[type]\n\n  return (\n    <DeviceOverrideBlock as={component} textAlign={data?.textAlign}>\n      {nodes?.map((node, idx) => (\n        <Node key={idx.toString()} {...node} />\n      ))}\n    </DeviceOverrideBlock>\n  )\n}\n\nfunction Inline({ type, nodes, data }: InlineJSON) {\n  const children = nodes?.map((node, idx) => <Node key={idx.toString()} {...node} />)\n  const linkClassName = useStyle({ textDecoration: 'none' })\n\n  switch (type) {\n    case 'code':\n      return <code>{children}</code>\n\n    case 'superscript':\n      return <sup>{children}</sup>\n\n    case 'subscript':\n      return <sub>{children}</sub>\n\n    case 'link':\n      return (\n        <Link className={linkClassName} link={data as LinkValue | undefined}>\n          {children}\n        </Link>\n      )\n\n    default:\n      return <>{children}</>\n  }\n}\n\nfunction Text({ marks, text = '' }: TextJSON) {\n  return (\n    <>\n      {(marks ?? []).reduce(\n        (element, mark) => (\n          <Mark {...mark}>{element}</Mark>\n        ),\n        <>{text === '' ? '\\uFEFF' : text}</>,\n      )}\n    </>\n  )\n}\n\nconst TYPOGRAPHY_MARK_TYPE = 'typography'\n\nfunction Mark({ type, children, data }: MarkJSON & { children: ReactNode }) {\n  if (type !== TYPOGRAPHY_MARK_TYPE) return <>{children}</>\n\n  return <DeviceOverrideMark value={data?.value}>{children}</DeviceOverrideMark>\n}\n\nfunction getNodeText(node: NodeJSON): string {\n  switch (node.object) {\n    case 'document':\n      return node?.nodes?.map(node => getNodeText(node)).join('\\n') ?? ''\n\n    case 'block':\n      return (\n        node?.nodes\n          ?.map(node => getNodeText(node))\n          .join(node.nodes.every(node => node.object === 'block') ? '\\n' : '') ?? ''\n      )\n\n    case 'inline':\n      return node?.nodes?.map(node => getNodeText(node)).join('') ?? ''\n\n    case 'text':\n      return node.text ?? ''\n\n    default:\n      return ''\n  }\n}\n"],"names":["ReadOnlyText","forwardRef","id","text","width","margin","ref","plaintext","document","getNodeText","cx","_jsx","useStyle","display","maxWidth","whiteSpace","opacity","verticalAlign","props","object","nodes","_Fragment","map","node","idx","toString","type","data","component","paragraph","blockquote","textAlign","children","linkClassName","textDecoration","marks","reduce","element","mark","TYPOGRAPHY_MARK_TYPE","DeviceOverrideMark","value","join","every"],"mappings":"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"}
+{"version":3,"file":"ReadOnlyText.es.js","sources":["../src/components/builtin/Text/ReadOnlyText.tsx"],"sourcesContent":["import { cx } from '@emotion/css'\nimport { ForwardedRef, forwardRef, ReactNode } from 'react'\nimport type { BlockJSON, DocumentJSON, InlineJSON, MarkJSON, NodeJSON, TextJSON } from 'slate'\nimport type {\n  ElementIDValue,\n  LinkValue,\n  RichTextValue,\n} from '../../../prop-controllers/descriptors'\nimport { useStyle } from '../../../runtimes/react/use-style'\nimport { Link } from '../../shared/Link'\nimport DeviceOverrideBlock from './components/RichTextEditor/components/Block'\nimport DeviceOverrideMark from './components/RichTextEditor/components/Mark'\n\ntype Props = {\n  id?: ElementIDValue\n  text?: RichTextValue\n  width?: string\n  margin?: string\n}\n\nconst ReadOnlyText = forwardRef(function ReadOnlyText(\n  { id, text, width, margin }: Props,\n  ref: ForwardedRef<HTMLDivElement>,\n) {\n  const plaintext = text?.document == null ? '' : getNodeText(text.document)\n\n  return (\n    <div ref={ref} id={id} className={cx(width, margin)}>\n      {plaintext === '' ? <Placeholder /> : <Node {...text?.document} />}\n    </div>\n  )\n})\n\nexport default ReadOnlyText\n\nfunction Placeholder({ text = 'Write some text...' }: { text?: string }) {\n  return (\n    <span\n      className={useStyle({\n        display: 'inline-block',\n        width: 0,\n        maxWidth: '100%',\n        whiteSpace: 'nowrap',\n        opacity: 0.333,\n        verticalAlign: 'text-top',\n      })}\n    >\n      {text}\n    </span>\n  )\n}\n\nfunction Node(props: NodeJSON) {\n  switch (props.object) {\n    case 'document':\n      return <Document {...props} />\n\n    case 'block':\n      return <Block {...props} />\n\n    case 'inline':\n      return <Inline {...props} />\n\n    case 'text':\n      return <Text {...props} />\n\n    default:\n      return null\n  }\n}\n\nfunction Document({ nodes }: DocumentJSON) {\n  return (\n    <>\n      {nodes?.map((node, idx) => (\n        <Node key={idx.toString()} {...node} />\n      ))}\n    </>\n  )\n}\n\nfunction Block({ type, data, nodes }: BlockJSON) {\n  const component = {\n    paragraph: 'p',\n    'heading-one': 'h1',\n    'heading-two': 'h2',\n    'heading-three': 'h3',\n    'heading-four': 'h4',\n    'heading-five': 'h5',\n    'heading-six': 'h6',\n    blockquote: 'blockquote',\n    'ordered-list': 'ol',\n    'unordered-list': 'ul',\n    'list-item': 'li',\n  }[type]\n\n  return (\n    <DeviceOverrideBlock as={component} textAlign={data?.textAlign}>\n      {nodes?.map((node, idx) => (\n        <Node key={idx.toString()} {...node} />\n      ))}\n    </DeviceOverrideBlock>\n  )\n}\n\nfunction Inline({ type, nodes, data }: InlineJSON) {\n  const children = nodes?.map((node, idx) => <Node key={idx.toString()} {...node} />)\n  const linkClassName = useStyle({ textDecoration: 'none' })\n\n  switch (type) {\n    case 'code':\n      return <code>{children}</code>\n\n    case 'superscript':\n      return <sup>{children}</sup>\n\n    case 'subscript':\n      return <sub>{children}</sub>\n\n    case 'link':\n      return (\n        <Link className={linkClassName} link={data as LinkValue | undefined}>\n          {children}\n        </Link>\n      )\n\n    default:\n      return <>{children}</>\n  }\n}\n\nfunction Text({ marks, text = '' }: TextJSON) {\n  return (\n    <>\n      {(marks ?? []).reduce(\n        (element, mark) => (\n          <Mark {...mark}>{element}</Mark>\n        ),\n        <>{text === '' ? '\\uFEFF' : text}</>,\n      )}\n    </>\n  )\n}\n\nconst TYPOGRAPHY_MARK_TYPE = 'typography'\n\nfunction Mark({ type, children, data }: MarkJSON & { children: ReactNode }) {\n  if (type !== TYPOGRAPHY_MARK_TYPE) return <>{children}</>\n\n  return <DeviceOverrideMark value={data?.value}>{children}</DeviceOverrideMark>\n}\n\nfunction getNodeText(node: NodeJSON): string {\n  switch (node.object) {\n    case 'document':\n      return node?.nodes?.map(node => getNodeText(node)).join('\\n') ?? ''\n\n    case 'block':\n      return (\n        node?.nodes\n          ?.map(node => getNodeText(node))\n          .join(node.nodes.every(node => node.object === 'block') ? '\\n' : '') ?? ''\n      )\n\n    case 'inline':\n      return node?.nodes?.map(node => getNodeText(node)).join('') ?? ''\n\n    case 'text':\n      return node.text ?? ''\n\n    default:\n      return ''\n  }\n}\n"],"names":["ReadOnlyText","forwardRef","id","text","width","margin","ref","plaintext","document","getNodeText","cx","_jsx","useStyle","display","maxWidth","whiteSpace","opacity","verticalAlign","props","object","nodes","_Fragment","map","node","idx","toString","type","data","component","paragraph","blockquote","textAlign","children","linkClassName","textDecoration","marks","reduce","element","mark","TYPOGRAPHY_MARK_TYPE","DeviceOverrideMark","value","join","every"],"mappings":"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"}

package/dist/index.cjs.js

@@ -1083,7 +1083,7 @@ class Document$1 extends NextDocument__default["default"] {
     });
   }
 }
-const version = "0.6.1";
+const version = "0.6.2";
 function isErrorWithMessage(error) {
   return typeof error === "object" && error !== null && "message" in error && typeof error.message === "string";
 }
@@ -1416,7 +1416,10 @@ function registerComponent$c(runtime) {
     props: {
       id: slot.ElementID(),
       backgrounds: slot.Backgrounds(),
-      width: slot.Width({ format: slot.Width.Format.ClassName }),
+      width: slot.Width({
+        format: slot.Width.Format.ClassName,
+        defaultValue: { value: 100, unit: "%" }
+      }),
       height: slot.ResponsiveIconRadioGroup({
         label: "Height",
         options: [