@makeswift/runtime 0.9.1 → 0.9.2

package/dist/react.cjs.js

@@ -13,11 +13,10 @@ require("@emotion/css");
 require("@emotion/serialize");
 require("@emotion/utils");
 require("slate");
-require("is-hotkey");
-require("slate-react");
 require("react/jsx-runtime");
 require("./text-input.cjs.js");
 require("./combobox.cjs.js");
+require("./select.cjs.js");
 require("use-sync-external-store/shim");
 require("./types.cjs.js");
 require("./deepEqual.cjs.js");

package/dist/react.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"react.cjs.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"react.cjs.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/react.es.js

@@ -11,11 +11,10 @@ import "@emotion/css";
 import "@emotion/serialize";
 import "@emotion/utils";
 import "slate";
-import "is-hotkey";
-import "slate-react";
 import "react/jsx-runtime";
 import "./text-input.es.js";
 import "./combobox.es.js";
+import "./select.es.js";
 import "use-sync-external-store/shim";
 import "./types.es.js";
 import "./deepEqual.es.js";

package/dist/react.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"react.es.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"react.es.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/select.cjs.js

@@ -0,0 +1,21 @@
+"use strict";
+const unstable_IconRadioGroupIcon = {
+  TextAlignCenter: "TextAlignCenter",
+  TextAlignJustify: "TextAlignJustify",
+  TextAlignLeft: "TextAlignLeft",
+  TextAlignRight: "TextAlignRight"
+};
+const IconRadioGroupControlType = "makeswift::controls::icon-radio-group";
+function unstable_IconRadioGroup(config) {
+  return { type: IconRadioGroupControlType, config };
+}
+const SelectControlType = "makeswift::controls::select";
+function Select(config) {
+  return { type: SelectControlType, config };
+}
+exports.IconRadioGroupControlType = IconRadioGroupControlType;
+exports.Select = Select;
+exports.SelectControlType = SelectControlType;
+exports.unstable_IconRadioGroup = unstable_IconRadioGroup;
+exports.unstable_IconRadioGroupIcon = unstable_IconRadioGroupIcon;
+//# sourceMappingURL=select.cjs.js.map

package/dist/select.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"select.cjs.js","sources":["../src/controls/icon-radio-group.ts","../src/controls/select.ts"],"sourcesContent":["export const unstable_IconRadioGroupIcon = {\n  TextAlignCenter: 'TextAlignCenter',\n  TextAlignJustify: 'TextAlignJustify',\n  TextAlignLeft: 'TextAlignLeft',\n  TextAlignRight: 'TextAlignRight',\n} as const\n\nexport type IconRadioGroupIcon =\n  (typeof unstable_IconRadioGroupIcon)[keyof typeof unstable_IconRadioGroupIcon]\n\nexport const IconRadioGroupControlType = 'makeswift::controls::icon-radio-group'\n\ntype IconRadioGroupOption<T extends string> = {\n  value: T\n  icon: IconRadioGroupIcon\n  label: string\n}\n\ntype IconRadioGroupControlConfig<T extends string = string> = {\n  label?: string\n  defaultValue?: T\n  options: IconRadioGroupOption<T>[]\n}\n\nexport type IconRadioGroupControlDefinition<\n  C extends IconRadioGroupControlConfig = IconRadioGroupControlConfig,\n> = {\n  type: typeof IconRadioGroupControlType\n  config: C\n}\n\nexport type IconRadioGroupControlDefinitionOption<\n  T extends IconRadioGroupControlDefinition = IconRadioGroupControlDefinition,\n> = T['config'] extends IconRadioGroupControlConfig<infer U> ? U : never\n\nexport type IconRadioGroupControlData<\n  T extends IconRadioGroupControlDefinition = IconRadioGroupControlDefinition,\n> = IconRadioGroupControlDefinitionOption<T>\n\nexport function unstable_IconRadioGroup<T extends string, C extends IconRadioGroupControlConfig<T>>(\n  config: C & { options: IconRadioGroupOption<T>[] },\n): IconRadioGroupControlDefinition<C> {\n  return { type: IconRadioGroupControlType, config }\n}\n","export const SelectControlType = 'makeswift::controls::select'\n\ntype SelectControlOption<T extends string> = { value: T; label: string }\n\ntype SelectControlConfig<T extends string = string> = {\n  label?: string\n  labelOrientation?: 'horizontal' | 'vertical'\n  options: SelectControlOption<T>[]\n  defaultValue?: T\n}\n\nexport type SelectControlDefinition<C extends SelectControlConfig = SelectControlConfig> = {\n  type: typeof SelectControlType\n  config: C\n}\n\nexport type SelectControlDefinitionOption<T extends SelectControlDefinition> =\n  T['config'] extends SelectControlConfig<infer U> ? U : never\n\nexport type SelectControlData<T extends SelectControlDefinition = SelectControlDefinition> =\n  SelectControlDefinitionOption<T>\n\nexport function Select<T extends string, C extends SelectControlConfig<T>>(\n  config: C & { options: SelectControlOption<T>[] },\n): SelectControlDefinition<C> {\n  return { type: SelectControlType, config }\n}\n"],"names":[],"mappings":";AAAO,MAAM,8BAA8B;AAAA,EACzC,iBAAiB;AAAA,EACjB,kBAAkB;AAAA,EAClB,eAAe;AAAA,EACf,gBAAgB;AAClB;AAKO,MAAM,4BAA4B;AA6BlC,iCACL,QACoC;AAC7B,SAAA,EAAE,MAAM,2BAA2B;AAC5C;AC3CO,MAAM,oBAAoB;AAsB1B,gBACL,QAC4B;AACrB,SAAA,EAAE,MAAM,mBAAmB;AACpC;;;;;;"}

package/dist/select.es.js

@@ -0,0 +1,16 @@
+const unstable_IconRadioGroupIcon = {
+  TextAlignCenter: "TextAlignCenter",
+  TextAlignJustify: "TextAlignJustify",
+  TextAlignLeft: "TextAlignLeft",
+  TextAlignRight: "TextAlignRight"
+};
+const IconRadioGroupControlType = "makeswift::controls::icon-radio-group";
+function unstable_IconRadioGroup(config) {
+  return { type: IconRadioGroupControlType, config };
+}
+const SelectControlType = "makeswift::controls::select";
+function Select(config) {
+  return { type: SelectControlType, config };
+}
+export { IconRadioGroupControlType as I, SelectControlType as S, unstable_IconRadioGroup as a, Select as b, unstable_IconRadioGroupIcon as u };
+//# sourceMappingURL=select.es.js.map

package/dist/select.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"select.es.js","sources":["../src/controls/icon-radio-group.ts","../src/controls/select.ts"],"sourcesContent":["export const unstable_IconRadioGroupIcon = {\n  TextAlignCenter: 'TextAlignCenter',\n  TextAlignJustify: 'TextAlignJustify',\n  TextAlignLeft: 'TextAlignLeft',\n  TextAlignRight: 'TextAlignRight',\n} as const\n\nexport type IconRadioGroupIcon =\n  (typeof unstable_IconRadioGroupIcon)[keyof typeof unstable_IconRadioGroupIcon]\n\nexport const IconRadioGroupControlType = 'makeswift::controls::icon-radio-group'\n\ntype IconRadioGroupOption<T extends string> = {\n  value: T\n  icon: IconRadioGroupIcon\n  label: string\n}\n\ntype IconRadioGroupControlConfig<T extends string = string> = {\n  label?: string\n  defaultValue?: T\n  options: IconRadioGroupOption<T>[]\n}\n\nexport type IconRadioGroupControlDefinition<\n  C extends IconRadioGroupControlConfig = IconRadioGroupControlConfig,\n> = {\n  type: typeof IconRadioGroupControlType\n  config: C\n}\n\nexport type IconRadioGroupControlDefinitionOption<\n  T extends IconRadioGroupControlDefinition = IconRadioGroupControlDefinition,\n> = T['config'] extends IconRadioGroupControlConfig<infer U> ? U : never\n\nexport type IconRadioGroupControlData<\n  T extends IconRadioGroupControlDefinition = IconRadioGroupControlDefinition,\n> = IconRadioGroupControlDefinitionOption<T>\n\nexport function unstable_IconRadioGroup<T extends string, C extends IconRadioGroupControlConfig<T>>(\n  config: C & { options: IconRadioGroupOption<T>[] },\n): IconRadioGroupControlDefinition<C> {\n  return { type: IconRadioGroupControlType, config }\n}\n","export const SelectControlType = 'makeswift::controls::select'\n\ntype SelectControlOption<T extends string> = { value: T; label: string }\n\ntype SelectControlConfig<T extends string = string> = {\n  label?: string\n  labelOrientation?: 'horizontal' | 'vertical'\n  options: SelectControlOption<T>[]\n  defaultValue?: T\n}\n\nexport type SelectControlDefinition<C extends SelectControlConfig = SelectControlConfig> = {\n  type: typeof SelectControlType\n  config: C\n}\n\nexport type SelectControlDefinitionOption<T extends SelectControlDefinition> =\n  T['config'] extends SelectControlConfig<infer U> ? U : never\n\nexport type SelectControlData<T extends SelectControlDefinition = SelectControlDefinition> =\n  SelectControlDefinitionOption<T>\n\nexport function Select<T extends string, C extends SelectControlConfig<T>>(\n  config: C & { options: SelectControlOption<T>[] },\n): SelectControlDefinition<C> {\n  return { type: SelectControlType, config }\n}\n"],"names":[],"mappings":"AAAO,MAAM,8BAA8B;AAAA,EACzC,iBAAiB;AAAA,EACjB,kBAAkB;AAAA,EAClB,eAAe;AAAA,EACf,gBAAgB;AAClB;AAKO,MAAM,4BAA4B;AA6BlC,iCACL,QACoC;AAC7B,SAAA,EAAE,MAAM,2BAA2B;AAC5C;AC3CO,MAAM,oBAAoB;AAsB1B,gBACL,QAC4B;AACrB,SAAA,EAAE,MAAM,mBAAmB;AACpC;;"}

package/dist/slate.cjs.js

@@ -20,70 +20,136 @@ var __spreadValues = (a, b) => {
 var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
 var index = require("./index.cjs5.js");
-var reactPage = require("./react-page.cjs.js");
 var index$1 = require("./index.cjs6.js");
 var index$2 = require("./index.cjs7.js");
+var index$3 = require("./index.cjs8.js");
+var reactPage = require("./react-page.cjs.js");
+var select = require("./select.cjs.js");
 var slate = require("slate");
+var deepEqual = require("./deepEqual.cjs.js");
 require("./state/breakpoints.cjs.js");
+require("./actions.cjs.js");
 require("is-hotkey");
+require("@emotion/css");
+require("react/jsx-runtime");
 require("slate-react");
-var deepEqual = require("./deepEqual.cjs.js");
 require("redux");
 require("redux-thunk");
-require("./actions.cjs.js");
 require("react");
-require("@emotion/css");
 require("@emotion/serialize");
 require("@emotion/utils");
-require("react/jsx-runtime");
-const textAlignDefinition = reactPage.Select({
-  options: [{
-    label: "Left",
-    value: "left"
-  }, {
-    label: "Center",
-    value: "center"
-  }, {
-    label: "Right",
-    value: "right"
-  }],
-  defaultValue: "left"
-});
-const definitionWithObject = reactPage.unstable_StyleV2({
-  type: textAlignDefinition,
-  getStyle(textAlign) {
-    return {
-      textAlign
-    };
-  }
-});
+function setResponsiveValue(editor, key, value, options) {
+  slate.Editor.withoutNormalizing(editor, () => {
+    const at = index$1.getSelection(editor);
+    if (!at)
+      return;
+    const atRef = slate.Editor.rangeRef(editor, at);
+    if (atRef.current) {
+      slate.Transforms.setNodes(editor, {
+        slice: true
+      }, {
+        at: atRef.current,
+        match: options.match,
+        split: options.split
+      });
+    }
+    if (atRef.current) {
+      const nodesToUpdate = Array.from(slate.Editor.nodes(editor, {
+        at: atRef.current,
+        match: (node, path) => options.match(node, path) && node.slice === true
+      }));
+      for (const [, path] of nodesToUpdate) {
+        slate.Transforms.setNodes(editor, {
+          [key]: value
+        }, { at: path });
+      }
+    }
+    atRef.unref();
+  });
+}
+function getResponsiveValue(editor, key, options) {
+  const matchingValues = Array.from(slate.Editor.nodes(editor, {
+    at: index$1.getSelection(editor),
+    match: options == null ? void 0 : options.match
+  })).filter(([node, path]) => options.match(node, path)).map(([node]) => node[key]);
+  const value = matchingValues.length === 0 ? void 0 : matchingValues.reduce((a, b) => deepEqual.deepEqual(a, b) ? b : void 0);
+  return value;
+}
+function normalizeResponsiveValue(editor, key, options) {
+  return (entry) => {
+    const [node, path] = entry;
+    if (!options.match(node, path)) {
+      return false;
+    }
+    const responsiveValue = node == null ? void 0 : node[key];
+    if (Array.isArray(responsiveValue) && responsiveValue.length === 0) {
+      slate.Transforms.unsetNodes(editor, key, { at: path });
+      return true;
+    }
+    if ((node == null ? void 0 : node.slice) != null) {
+      slate.Transforms.unsetNodes(editor, "slice", { at: path });
+      return true;
+    }
+    return false;
+  };
+}
+const TEXT_ALIGN_KEY = "textAlign";
 function TextAlignPlugin() {
   return reactPage.createRichTextV2Plugin({
     control: {
-      definition: definitionWithObject,
-      onChange: (editor, value) => {
-        const rootElements = reactPage.getBlocksInSelection(editor);
-        for (const [node, path] of rootElements) {
-          if (reactPage.ElementUtils.isBlock(node)) {
-            slate.Transforms.setNodes(editor, {
-              ["textAlign"]: value
-            }, {
-              at: path
-            });
-          }
+      definition: reactPage.unstable_StyleV2({
+        type: select.unstable_IconRadioGroup({
+          label: "Alignment",
+          options: [{
+            icon: select.unstable_IconRadioGroupIcon.TextAlignLeft,
+            label: "Left Align",
+            value: "left"
+          }, {
+            icon: select.unstable_IconRadioGroupIcon.TextAlignCenter,
+            label: "Center Align",
+            value: "center"
+          }, {
+            icon: select.unstable_IconRadioGroupIcon.TextAlignRight,
+            label: "Right Align",
+            value: "right"
+          }, {
+            icon: select.unstable_IconRadioGroupIcon.TextAlignJustify,
+            label: "Justify",
+            value: "justify"
+          }],
+          defaultValue: "left"
+        }),
+        getStyle(textAlign) {
+          return {
+            textAlign
+          };
         }
-      },
-      getValue: (editor) => {
-        const blocks = reactPage.getBlocksInSelection(editor).map(([block]) => {
-          return block.textAlign;
-        });
-        const value = blocks.length === 0 ? void 0 : blocks.reduce((a, b) => deepEqual.deepEqual(a, b) ? b : void 0);
-        return value;
-      },
+      }),
+      onChange: (editor, value) => setResponsiveValue(editor, TEXT_ALIGN_KEY, value, {
+        match: index$1.ElementUtils.isRootBlock,
+        split: false
+      }),
+      getValue: (editor) => getResponsiveValue(editor, TEXT_ALIGN_KEY, {
+        match: index$1.ElementUtils.isRootBlock
+      }),
       getElementValue: (element) => {
-        return reactPage.ElementUtils.isRootBlock(element) ? element.textAlign : void 0;
+        return index$1.ElementUtils.isRootBlock(element) ? element.textAlign : void 0;
       }
     },
+    withPlugin: (editor) => {
+      const {
+        normalizeNode
+      } = editor;
+      editor.normalizeNode = (entry) => {
+        if (normalizeResponsiveValue(editor, TEXT_ALIGN_KEY, {
+          match: index$1.ElementUtils.isRootBlock
+        })(entry)) {
+          return;
+        }
+        normalizeNode(entry);
+      };
+      return editor;
+    },
     renderElement: (renderElement, className) => (props) => {
       return renderElement(__spreadProps(__spreadValues({}, props), {
         element: __spreadProps(__spreadValues({}, props.element), {
@@ -93,20 +159,71 @@ function TextAlignPlugin() {
     }
   });
 }
+const COLOR_KEY = "color";
+function ColorPlugin() {
+  return reactPage.createRichTextV2Plugin({
+    control: {
+      definition: reactPage.unstable_StyleV2({
+        type: reactPage.Color({
+          label: "Color"
+        }),
+        getStyle(color) {
+          return {
+            color
+          };
+        }
+      }),
+      onChange: (editor, value) => {
+        setResponsiveValue(editor, COLOR_KEY, value, {
+          match: slate.Text.isText,
+          split: true
+        });
+      },
+      getValue: (editor) => getResponsiveValue(editor, COLOR_KEY, {
+        match: slate.Text.isText
+      }),
+      getLeafValue: (text) => {
+        return slate.Text.isText(text) ? text == null ? void 0 : text.color : void 0;
+      }
+    },
+    withPlugin: (editor) => {
+      const {
+        normalizeNode
+      } = editor;
+      editor.normalizeNode = (entry) => {
+        if (normalizeResponsiveValue(editor, COLOR_KEY, {
+          match: slate.Text.isText
+        })(entry)) {
+          return;
+        }
+        normalizeNode(entry);
+      };
+      return editor;
+    },
+    renderLeaf: (renderLeaf, className) => (props) => {
+      return renderLeaf(__spreadProps(__spreadValues({}, props), {
+        leaf: __spreadProps(__spreadValues({}, props.leaf), {
+          className
+        })
+      }));
+    }
+  });
+}
 exports.TypographyActions = index.TypographyActions;
 exports.withTypography = index.withTypography;
-exports.BlockActions = reactPage.BlockActions;
-exports.BlockPlugin = reactPage.BlockPlugin;
+exports.BlockActions = index$1.BlockActions;
+exports.BlockPlugin = index$1.BlockPlugin;
+exports.ListActions = index$1.ListActions;
+exports.onKeyDown = index$1.onKeyDown;
+exports.withBlock = index$1.withBlock;
+exports.InlineModePlugin = index$2.InlineModePlugin;
+exports.withInlineMode = index$2.withInlineMode;
+exports.withBuilder = index$3.withBuilder;
 exports.BlockTextAlignment = reactPage.BlockTextAlignment;
 exports.BlockType = reactPage.BlockType;
 exports.InlineType = reactPage.InlineType;
-exports.ListActions = reactPage.ListActions;
 exports.RootBlockType = reactPage.RootBlockType;
-exports.onKeyDown = reactPage.onKeyDown;
-exports.withBlock = reactPage.withBlock;
-exports.InlineModePlugin = index$1.InlineModePlugin;
-exports.withInlineMode = index$1.withInlineMode;
-exports.withBuilder = index$2.withBuilder;
+exports.COLOR_KEY = COLOR_KEY;
+exports.ColorPlugin = ColorPlugin;
 exports.TextAlignPlugin = TextAlignPlugin;
-exports.definitionWithObject = definitionWithObject;
 //# sourceMappingURL=slate.cjs.js.map

package/dist/slate.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"slate.cjs.js","sources":["../src/slate/TextAlignPlugin/index.tsx"],"sourcesContent":["import { Element, Transforms } from 'slate'\nimport {\n  ControlDefinitionData,\n  Select,\n  createRichTextV2Plugin,\n  unstable_StyleV2,\n} from '../../controls'\nimport { getBlocksInSelection } from '../selectors'\nimport deepEqual from '../../utils/deepEqual'\nimport { ElementUtils } from '../utils/element'\n\nconst textAlignDefinition = Select({\n  options: [\n    {\n      label: 'Left',\n      value: 'left',\n    },\n    {\n      label: 'Center',\n      value: 'center',\n    },\n    {\n      label: 'Right',\n      value: 'right',\n    },\n  ],\n  defaultValue: 'left',\n})\n\nexport const definitionWithObject = unstable_StyleV2({\n  type: textAlignDefinition,\n  getStyle(textAlign: ControlDefinitionData<typeof textAlignDefinition>) {\n    return { textAlign }\n  },\n})\n\nexport function TextAlignPlugin() {\n  return createRichTextV2Plugin({\n    control: {\n      definition: definitionWithObject,\n      onChange: (editor, value) => {\n        const rootElements = getBlocksInSelection(editor)\n\n        for (const [node, path] of rootElements) {\n          if (ElementUtils.isBlock(node)) {\n            Transforms.setNodes(\n              editor,\n              {\n                ['textAlign']: value,\n              },\n              { at: path },\n            )\n          }\n        }\n      },\n      getValue: editor => {\n        const blocks = getBlocksInSelection(editor).map(([block]) => {\n          return block.textAlign\n        })\n\n        const value =\n          blocks.length === 0\n            ? undefined\n            : blocks.reduce((a, b) => (deepEqual(a, b) ? b : undefined))\n\n        return value\n      },\n      getElementValue: (element: Element) => {\n        return ElementUtils.isRootBlock(element) ? element.textAlign : undefined\n      },\n    },\n    renderElement: (renderElement, className) => props => {\n      return renderElement({\n        ...props,\n        element: {\n          ...props.element,\n          className,\n        },\n      })\n    },\n  })\n}\n"],"names":["textAlignDefinition","Select","options","label","value","defaultValue","definitionWithObject","unstable_StyleV2","type","getStyle","textAlign","createRichTextV2Plugin","control","definition","onChange","editor","rootElements","getBlocksInSelection","node","path","ElementUtils","isBlock","Transforms","setNodes","at","getValue","blocks","map","block","length","undefined","reduce","a","b","deepEqual","getElementValue","element","isRootBlock","renderElement","className","props"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAWA,MAAMA,sBAAsBC,UAAAA,OAAO;AAAA,EACjCC,SAAS,CACP;AAAA,IACEC,OAAO;AAAA,IACPC,OAAO;AAAA,EAAA,GAET;AAAA,IACED,OAAO;AAAA,IACPC,OAAO;AAAA,EAAA,GAET;AAAA,IACED,OAAO;AAAA,IACPC,OAAO;AAAA,EAAA,CAXF;AAAA,EAcTC,cAAc;AAfmB,CAAD;AAkB3B,MAAMC,uBAAuBC,UAAAA,iBAAiB;AAAA,EACnDC,MAAMR;AAAAA,EACNS,SAASC,WAA8D;AAC9D,WAAA;AAAA,MAAEA;AAAAA,IAAAA;AAAAA,EACV;AAJkD,CAAD;AAOlB,2BAAA;AAChC,SAAOC,iCAAuB;AAAA,IAC5BC,SAAS;AAAA,MACPC,YAAYP;AAAAA,MACZQ,UAAU,CAACC,QAAQX,UAAU;AACrBY,cAAAA,eAAeC,+BAAqBF,MAAD;AAE9B,mBAAA,CAACG,MAAMC,SAASH,cAAc;AACnCI,cAAAA,UAAAA,aAAaC,QAAQH,IAArB,GAA4B;AAC9BI,kBAAAA,WAAWC,SACTR,QACA;AAAA,eACG,cAAcX;AAAAA,YAAAA,GAEjB;AAAA,cAAEoB,IAAIL;AAAAA,YAAAA,CALR;AAAA,UAOD;AAAA,QACF;AAAA,MAfI;AAAA,MAiBPM,UAAUV,CAAU,WAAA;AAClB,cAAMW,SAAST,UAAAA,qBAAqBF,MAAD,EAASY,IAAI,CAAC,CAACC,WAAW;AACpDA,iBAAAA,MAAMlB;AAAAA,QAAAA,CADA;AAIf,cAAMN,QACJsB,OAAOG,WAAW,IACdC,SACAJ,OAAOK,OAAO,CAACC,GAAGC,MAAOC,UAAAA,UAAUF,GAAGC,CAAJ,IAASA,IAAIH,MAA/C;AAEC1B,eAAAA;AAAAA,MA3BF;AAAA,MA6BP+B,iBAAiB,CAACC,YAAqB;AAC9BhB,eAAAA,UAAAA,aAAaiB,YAAYD,OAAzB,IAAoCA,QAAQ1B,YAAYoB;AAAAA,MAChE;AAAA,IAhCyB;AAAA,IAkC5BQ,eAAe,CAACA,eAAeC,cAAcC,CAAS,UAAA;AACpD,aAAOF,cAAc,iCAChBE,QADgB;AAAA,QAEnBJ,SAAS,iCACJI,MAAMJ,UADF;AAAA,UAEPG;AAAAA,QAFO;AAAA,MAAA,EAFS;AAAA,IAOrB;AAAA,EAAA,CA1C0B;AA4C9B;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"slate.cjs.js","sources":["../src/slate/utils/responsive.ts","../src/slate/TextAlignPlugin/index.tsx","../src/slate/ColorPlugin/index.tsx"],"sourcesContent":["import { Editor, Transforms, NodeMatch, Descendant, NodeEntry } from 'slate'\nimport { getSelection } from '../selectors'\nimport deepEqual from '../../utils/deepEqual'\n\ntype SetResponsiveValueOptions<T extends Descendant> = {\n  match: NodeMatch<T>\n  split: boolean\n}\n\nexport function setResponsiveValue<T extends Descendant, K extends keyof T>(\n  editor: Editor,\n  key: K,\n  value: T[K] | undefined,\n  options: SetResponsiveValueOptions<T>,\n) {\n  Editor.withoutNormalizing(editor, () => {\n    const at = getSelection(editor)\n    if (!at) return\n    const atRef = Editor.rangeRef(editor, at)\n\n    if (atRef.current) {\n      Transforms.setNodes<Descendant>(\n        editor,\n        {\n          slice: true,\n        },\n        {\n          at: atRef.current,\n          match: options.match,\n          split: options.split,\n        },\n      )\n    }\n\n    if (atRef.current) {\n      const nodesToUpdate = Array.from(\n        Editor.nodes(editor, {\n          at: atRef.current,\n          match: (node, path) => options.match(node, path) && node.slice === true,\n        }),\n      )\n\n      for (const [, path] of nodesToUpdate) {\n        Transforms.setNodes(\n          editor,\n          {\n            [key]: value,\n          },\n          { at: path },\n        )\n      }\n    }\n\n    atRef.unref()\n  })\n}\n\ntype GetResponsiveValueOptions<T extends Descendant> = {\n  match: NodeMatch<T>\n}\n\nexport function getResponsiveValue<T extends Descendant, K extends keyof T>(\n  editor: Editor,\n  key: K,\n  options: GetResponsiveValueOptions<T>,\n): T[K] | undefined {\n  const matchingValues = Array.from(\n    Editor.nodes(editor, {\n      at: getSelection(editor),\n      match: options?.match,\n    }),\n  )\n    .filter(([node, path]) => options.match(node, path))\n    .map(([node]) => node[key]) as (T[K] | undefined)[]\n\n  const value =\n    matchingValues.length === 0\n      ? undefined\n      : matchingValues.reduce((a, b) => (deepEqual(a, b) ? b : undefined))\n\n  return value\n}\n\ntype NormalizeResponsiveValueOptions<T extends Descendant> = {\n  match: NodeMatch<T>\n}\n\nexport function normalizeResponsiveValue<T extends Descendant, K extends keyof T & string>(\n  editor: Editor,\n  key: K,\n  options: NormalizeResponsiveValueOptions<T>,\n) {\n  return (entry: NodeEntry) => {\n    const [node, path] = entry\n\n    if (!options.match(node, path)) {\n      return false\n    }\n\n    const responsiveValue = node?.[key]\n\n    if (Array.isArray(responsiveValue) && responsiveValue.length === 0) {\n      Transforms.unsetNodes(editor, key, { at: path })\n      return true\n    }\n\n    if (node?.slice != null) {\n      Transforms.unsetNodes(editor, 'slice', { at: path })\n      return true\n    }\n\n    return false\n  }\n}\n","import { Editor, Element } from 'slate'\nimport {\n  createRichTextV2Plugin,\n  unstable_IconRadioGroup,\n  unstable_IconRadioGroupIcon,\n  unstable_StyleV2,\n} from '../../controls'\nimport { ElementUtils } from '../utils/element'\nimport { TextAlignProperty } from 'csstype'\nimport {\n  getResponsiveValue,\n  normalizeResponsiveValue,\n  setResponsiveValue,\n} from '../utils/responsive'\n\nconst TEXT_ALIGN_KEY = 'textAlign'\n\nexport function TextAlignPlugin() {\n  return createRichTextV2Plugin({\n    control: {\n      definition: unstable_StyleV2({\n        type: unstable_IconRadioGroup({\n          label: 'Alignment',\n          options: [\n            {\n              icon: unstable_IconRadioGroupIcon.TextAlignLeft,\n              label: 'Left Align',\n              value: 'left',\n            },\n            {\n              icon: unstable_IconRadioGroupIcon.TextAlignCenter,\n              label: 'Center Align',\n              value: 'center',\n            },\n            {\n              icon: unstable_IconRadioGroupIcon.TextAlignRight,\n              label: 'Right Align',\n              value: 'right',\n            },\n            {\n              icon: unstable_IconRadioGroupIcon.TextAlignJustify,\n              label: 'Justify',\n              value: 'justify',\n            },\n          ],\n          defaultValue: 'left',\n        }),\n        getStyle(textAlign: TextAlignProperty) {\n          return { textAlign }\n        },\n      }),\n      onChange: (editor, value) =>\n        setResponsiveValue(editor, TEXT_ALIGN_KEY, value, {\n          match: ElementUtils.isRootBlock,\n          split: false,\n        }),\n      getValue: editor =>\n        getResponsiveValue(editor, TEXT_ALIGN_KEY, { match: ElementUtils.isRootBlock }),\n      getElementValue: (element: Element) => {\n        return ElementUtils.isRootBlock(element) ? element.textAlign : undefined\n      },\n    },\n    withPlugin: (editor: Editor) => {\n      const { normalizeNode } = editor\n      editor.normalizeNode = entry => {\n        if (\n          normalizeResponsiveValue(editor, TEXT_ALIGN_KEY, { match: ElementUtils.isRootBlock })(\n            entry,\n          )\n        ) {\n          return\n        }\n        normalizeNode(entry)\n      }\n\n      return editor\n    },\n    renderElement: (renderElement, className) => props => {\n      return renderElement({\n        ...props,\n        element: {\n          ...props.element,\n          className,\n        },\n      })\n    },\n  })\n}\n","import { Editor, Text } from 'slate'\nimport {\n  Color,\n  createRichTextV2Plugin,\n  unstable_StyleV2,\n  ColorControlDefinition,\n} from '../../controls'\nimport { ControlDefinitionValue } from '../../runtimes/react/controls/control'\nimport {\n  getResponsiveValue,\n  normalizeResponsiveValue,\n  setResponsiveValue,\n} from '../utils/responsive'\n\nexport const COLOR_KEY = 'color'\n\nexport function ColorPlugin() {\n  return createRichTextV2Plugin({\n    control: {\n      definition: unstable_StyleV2({\n        type: Color({\n          label: 'Color',\n        }),\n        getStyle(color: ControlDefinitionValue<ColorControlDefinition>) {\n          return { color }\n        },\n      }),\n      onChange: (editor, value) => {\n        setResponsiveValue(editor, COLOR_KEY, value, {\n          match: Text.isText,\n          split: true,\n        })\n      },\n      getValue: editor => getResponsiveValue(editor, COLOR_KEY, { match: Text.isText }),\n      getLeafValue: (text: Text) => {\n        return Text.isText(text) ? text?.color : undefined\n      },\n    },\n    withPlugin: (editor: Editor) => {\n      const { normalizeNode } = editor\n      editor.normalizeNode = entry => {\n        if (normalizeResponsiveValue(editor, COLOR_KEY, { match: Text.isText })(entry)) {\n          return\n        }\n\n        normalizeNode(entry)\n      }\n\n      return editor\n    },\n    renderLeaf: (renderLeaf, className) => props => {\n      return renderLeaf({\n        ...props,\n        leaf: {\n          ...props.leaf,\n          className,\n        },\n      })\n    },\n  })\n}\n"],"names":["Editor","getSelection","Transforms","deepEqual","TEXT_ALIGN_KEY","createRichTextV2Plugin","control","definition","unstable_StyleV2","type","unstable_IconRadioGroup","label","options","icon","unstable_IconRadioGroupIcon","TextAlignLeft","value","TextAlignCenter","TextAlignRight","TextAlignJustify","defaultValue","getStyle","textAlign","onChange","editor","setResponsiveValue","match","ElementUtils","isRootBlock","split","getValue","getResponsiveValue","getElementValue","element","undefined","withPlugin","normalizeNode","entry","normalizeResponsiveValue","renderElement","className","props","COLOR_KEY","Color","color","Text","isText","getLeafValue","text","renderLeaf","leaf"],"mappings":"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"}

package/dist/slate.es.js

@@ -5,84 +5,151 @@ var __getOwnPropSymbols = Object.getOwnPropertySymbols;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __propIsEnum = Object.prototype.propertyIsEnumerable;
 var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues = (a, b) => {
+var __spreadValues = (a2, b) => {
   for (var prop in b || (b = {}))
     if (__hasOwnProp.call(b, prop))
-      __defNormalProp(a, prop, b[prop]);
+      __defNormalProp(a2, prop, b[prop]);
   if (__getOwnPropSymbols)
     for (var prop of __getOwnPropSymbols(b)) {
       if (__propIsEnum.call(b, prop))
-        __defNormalProp(a, prop, b[prop]);
+        __defNormalProp(a2, prop, b[prop]);
     }
-  return a;
+  return a2;
 };
-var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __spreadProps = (a2, b) => __defProps(a2, __getOwnPropDescs(b));
 export { T as TypographyActions, w as withTypography } from "./index.es5.js";
-import { aY as unstable_StyleV2, b8 as createRichTextV2Plugin, bc as getBlocksInSelection, bd as ElementUtils, aJ as Select } from "./react-page.es.js";
-export { be as BlockActions, bi as BlockPlugin, bm as BlockTextAlignment, bk as BlockType, bl as InlineType, bf as ListActions, bj as RootBlockType, bg as onKeyDown, bh as withBlock } from "./react-page.es.js";
-export { I as InlineModePlugin, w as withInlineMode } from "./index.es6.js";
-export { w as withBuilder } from "./index.es7.js";
-import { Transforms } from "slate";
+import { g as getSelection, E as ElementUtils } from "./index.es6.js";
+export { B as BlockActions, a as BlockPlugin, L as ListActions, o as onKeyDown, w as withBlock } from "./index.es6.js";
+export { I as InlineModePlugin, w as withInlineMode } from "./index.es7.js";
+export { w as withBuilder } from "./index.es8.js";
+import { b6 as createRichTextV2Plugin, aW as unstable_StyleV2, aw as Color } from "./react-page.es.js";
+export { bd as BlockTextAlignment, bb as BlockType, bc as InlineType, ba as RootBlockType } from "./react-page.es.js";
+import { a as unstable_IconRadioGroup, u as unstable_IconRadioGroupIcon } from "./select.es.js";
+import { Transforms, Editor, Text } from "slate";
+import { d as deepEqual } from "./deepEqual.es.js";
 import "./state/breakpoints.es.js";
+import "./actions.es.js";
 import "is-hotkey";
+import "@emotion/css";
+import "react/jsx-runtime";
 import "slate-react";
-import { d as deepEqual } from "./deepEqual.es.js";
 import "redux";
 import "redux-thunk";
-import "./actions.es.js";
 import "react";
-import "@emotion/css";
 import "@emotion/serialize";
 import "@emotion/utils";
-import "react/jsx-runtime";
-const textAlignDefinition = Select({
-  options: [{
-    label: "Left",
-    value: "left"
-  }, {
-    label: "Center",
-    value: "center"
-  }, {
-    label: "Right",
-    value: "right"
-  }],
-  defaultValue: "left"
-});
-const definitionWithObject = unstable_StyleV2({
-  type: textAlignDefinition,
-  getStyle(textAlign) {
-    return {
-      textAlign
-    };
-  }
-});
+function setResponsiveValue(editor, key, value, options) {
+  Editor.withoutNormalizing(editor, () => {
+    const at = getSelection(editor);
+    if (!at)
+      return;
+    const atRef = Editor.rangeRef(editor, at);
+    if (atRef.current) {
+      Transforms.setNodes(editor, {
+        slice: true
+      }, {
+        at: atRef.current,
+        match: options.match,
+        split: options.split
+      });
+    }
+    if (atRef.current) {
+      const nodesToUpdate = Array.from(Editor.nodes(editor, {
+        at: atRef.current,
+        match: (node, path) => options.match(node, path) && node.slice === true
+      }));
+      for (const [, path] of nodesToUpdate) {
+        Transforms.setNodes(editor, {
+          [key]: value
+        }, { at: path });
+      }
+    }
+    atRef.unref();
+  });
+}
+function getResponsiveValue(editor, key, options) {
+  const matchingValues = Array.from(Editor.nodes(editor, {
+    at: getSelection(editor),
+    match: options == null ? void 0 : options.match
+  })).filter(([node, path]) => options.match(node, path)).map(([node]) => node[key]);
+  const value = matchingValues.length === 0 ? void 0 : matchingValues.reduce((a2, b) => deepEqual(a2, b) ? b : void 0);
+  return value;
+}
+function normalizeResponsiveValue(editor, key, options) {
+  return (entry) => {
+    const [node, path] = entry;
+    if (!options.match(node, path)) {
+      return false;
+    }
+    const responsiveValue = node == null ? void 0 : node[key];
+    if (Array.isArray(responsiveValue) && responsiveValue.length === 0) {
+      Transforms.unsetNodes(editor, key, { at: path });
+      return true;
+    }
+    if ((node == null ? void 0 : node.slice) != null) {
+      Transforms.unsetNodes(editor, "slice", { at: path });
+      return true;
+    }
+    return false;
+  };
+}
+const TEXT_ALIGN_KEY = "textAlign";
 function TextAlignPlugin() {
   return createRichTextV2Plugin({
     control: {
-      definition: definitionWithObject,
-      onChange: (editor, value) => {
-        const rootElements = getBlocksInSelection(editor);
-        for (const [node, path] of rootElements) {
-          if (ElementUtils.isBlock(node)) {
-            Transforms.setNodes(editor, {
-              ["textAlign"]: value
-            }, {
-              at: path
-            });
-          }
+      definition: unstable_StyleV2({
+        type: unstable_IconRadioGroup({
+          label: "Alignment",
+          options: [{
+            icon: unstable_IconRadioGroupIcon.TextAlignLeft,
+            label: "Left Align",
+            value: "left"
+          }, {
+            icon: unstable_IconRadioGroupIcon.TextAlignCenter,
+            label: "Center Align",
+            value: "center"
+          }, {
+            icon: unstable_IconRadioGroupIcon.TextAlignRight,
+            label: "Right Align",
+            value: "right"
+          }, {
+            icon: unstable_IconRadioGroupIcon.TextAlignJustify,
+            label: "Justify",
+            value: "justify"
+          }],
+          defaultValue: "left"
+        }),
+        getStyle(textAlign) {
+          return {
+            textAlign
+          };
         }
-      },
-      getValue: (editor) => {
-        const blocks = getBlocksInSelection(editor).map(([block]) => {
-          return block.textAlign;
-        });
-        const value = blocks.length === 0 ? void 0 : blocks.reduce((a, b) => deepEqual(a, b) ? b : void 0);
-        return value;
-      },
+      }),
+      onChange: (editor, value) => setResponsiveValue(editor, TEXT_ALIGN_KEY, value, {
+        match: ElementUtils.isRootBlock,
+        split: false
+      }),
+      getValue: (editor) => getResponsiveValue(editor, TEXT_ALIGN_KEY, {
+        match: ElementUtils.isRootBlock
+      }),
       getElementValue: (element) => {
         return ElementUtils.isRootBlock(element) ? element.textAlign : void 0;
       }
     },
+    withPlugin: (editor) => {
+      const {
+        normalizeNode
+      } = editor;
+      editor.normalizeNode = (entry) => {
+        if (normalizeResponsiveValue(editor, TEXT_ALIGN_KEY, {
+          match: ElementUtils.isRootBlock
+        })(entry)) {
+          return;
+        }
+        normalizeNode(entry);
+      };
+      return editor;
+    },
     renderElement: (renderElement, className) => (props) => {
       return renderElement(__spreadProps(__spreadValues({}, props), {
         element: __spreadProps(__spreadValues({}, props.element), {
@@ -92,5 +159,55 @@ function TextAlignPlugin() {
     }
   });
 }
-export { TextAlignPlugin, definitionWithObject };
+const COLOR_KEY = "color";
+function ColorPlugin() {
+  return createRichTextV2Plugin({
+    control: {
+      definition: unstable_StyleV2({
+        type: Color({
+          label: "Color"
+        }),
+        getStyle(color) {
+          return {
+            color
+          };
+        }
+      }),
+      onChange: (editor, value) => {
+        setResponsiveValue(editor, COLOR_KEY, value, {
+          match: Text.isText,
+          split: true
+        });
+      },
+      getValue: (editor) => getResponsiveValue(editor, COLOR_KEY, {
+        match: Text.isText
+      }),
+      getLeafValue: (text) => {
+        return Text.isText(text) ? text == null ? void 0 : text.color : void 0;
+      }
+    },
+    withPlugin: (editor) => {
+      const {
+        normalizeNode
+      } = editor;
+      editor.normalizeNode = (entry) => {
+        if (normalizeResponsiveValue(editor, COLOR_KEY, {
+          match: Text.isText
+        })(entry)) {
+          return;
+        }
+        normalizeNode(entry);
+      };
+      return editor;
+    },
+    renderLeaf: (renderLeaf, className) => (props) => {
+      return renderLeaf(__spreadProps(__spreadValues({}, props), {
+        leaf: __spreadProps(__spreadValues({}, props.leaf), {
+          className
+        })
+      }));
+    }
+  });
+}
+export { COLOR_KEY, ColorPlugin, TextAlignPlugin };
 //# sourceMappingURL=slate.es.js.map