@webiny/lexical-theme 6.0.0-beta.0 → 6.0.0-rc.0

package/README.md

@@ -1,6 +1,11 @@
 # @webiny/lexical-theme
 
-[![](https://img.shields.io/npm/dw/@webiny/lexical-theme.svg)](https://www.npmjs.com/package/@webiny/llexical-lexical-theme)
-[![](https://img.shields.io/npm/v/@webiny/lexical-theme.svg)](https://www.npmjs.com/package/@webiny/lexical-theme)
-[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat-square)](https://github.com/prettier/prettier)
-[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](http://makeapullrequest.com)
+> [!NOTE]
+> This package is part of the [Webiny](https://www.webiny.com) monorepo.
+> It’s **included in every Webiny project by default** and is not meant to be used as a standalone package.
+
+📘 **Documentation:** [https://www.webiny.com/docs](https://www.webiny.com/docs)
+
+---
+
+_This README file is automatically generated during the publish process._

package/Theme.d.ts

@@ -0,0 +1,18 @@
+import type { EditorThemeClasses } from "lexical";
+import type { ColorValue, EditorTheme, TypographyValue } from "./types.js";
+export declare class Theme {
+    static cache: Record<string, Theme>;
+    static lastUsedTheme: Theme | null;
+    readonly tokens: EditorThemeClasses;
+    private _colors;
+    private _typography;
+    private _typographyMap;
+    constructor(colors: EditorTheme["colors"], typography: EditorTheme["typography"], tokens: EditorThemeClasses);
+    static empty(): Theme;
+    static from(lexicalTheme: EditorThemeClasses): Theme;
+    get colors(): ColorValue[];
+    get typography(): Record<string, TypographyValue[]>;
+    getTypographyById(id: string): TypographyValue;
+    getTypographyByTag(tag: string | string[]): TypographyValue | undefined;
+    private toTypographyMap;
+}

package/Theme.js

@@ -0,0 +1,64 @@
+export class Theme {
+  static cache = {};
+  static lastUsedTheme = null;
+  constructor(colors, typography, tokens) {
+    this._colors = colors;
+    this._typography = typography;
+    this._typographyMap = this.toTypographyMap(typography);
+    this.tokens = tokens;
+  }
+  static empty() {
+    return new Theme([], {}, {});
+  }
+  static from(lexicalTheme) {
+    const {
+      $colors,
+      $typography,
+      $cacheKey,
+      ...tokens
+    } = lexicalTheme;
+    if (!$colors) {
+      return Theme.lastUsedTheme ?? Theme.empty();
+    }
+    if (!Theme.cache[$cacheKey]) {
+      Theme.cache[$cacheKey] = new Theme($colors, $typography, tokens);
+    }
+    Theme.lastUsedTheme = Theme.cache[$cacheKey];
+    return Theme.cache[$cacheKey];
+  }
+  get colors() {
+    return this._colors;
+  }
+  get typography() {
+    return this._typography;
+  }
+  getTypographyById(id) {
+    return this._typographyMap[id];
+  }
+  getTypographyByTag(tag) {
+    const tags = Array.isArray(tag) ? tag : [tag];
+    for (const styleId in this._typographyMap) {
+      const style = this._typographyMap[styleId];
+      if (tags.includes(style.tag)) {
+        return style;
+      }
+    }
+    return undefined;
+  }
+
+  /*
+   *  Creates a map of style key ID's and typography style objects
+   */
+
+  toTypographyMap(typography) {
+    return Object.keys(typography).reduce((acc, key) => {
+      const items = typography[key];
+      for (const item of items) {
+        acc[item.id] = item;
+      }
+      return acc;
+    }, {});
+  }
+}
+
+//# sourceMappingURL=Theme.js.map

package/Theme.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["Theme","cache","lastUsedTheme","constructor","colors","typography","tokens","_colors","_typography","_typographyMap","toTypographyMap","empty","from","lexicalTheme","$colors","$typography","$cacheKey","getTypographyById","id","getTypographyByTag","tag","tags","Array","isArray","styleId","style","includes","undefined","Object","keys","reduce","acc","key","items","item"],"sources":["Theme.ts"],"sourcesContent":["import type { EditorThemeClasses } from \"lexical\";\nimport type { ColorValue, EditorTheme, TypographyMap, TypographyValue } from \"~/types.js\";\n\ntype InternalProps = {\n    $colors: EditorTheme[\"colors\"];\n    $typography: EditorTheme[\"typography\"];\n    $cacheKey: string;\n};\n\ntype InternalTheme = EditorThemeClasses & InternalProps;\n\nexport class Theme {\n    static cache: Record<string, Theme> = {};\n    static lastUsedTheme: Theme | null = null;\n    public readonly tokens: EditorThemeClasses;\n    private _colors: ColorValue[];\n    private _typography: Record<string, TypographyValue[]>;\n    private _typographyMap: TypographyMap;\n\n    constructor(\n        colors: EditorTheme[\"colors\"],\n        typography: EditorTheme[\"typography\"],\n        tokens: EditorThemeClasses\n    ) {\n        this._colors = colors;\n        this._typography = typography;\n        this._typographyMap = this.toTypographyMap(typography);\n        this.tokens = tokens;\n    }\n\n    static empty() {\n        return new Theme([], {}, {});\n    }\n\n    static from(lexicalTheme: EditorThemeClasses) {\n        const { $colors, $typography, $cacheKey, ...tokens } = lexicalTheme as InternalTheme;\n\n        if (!$colors) {\n            return Theme.lastUsedTheme ?? Theme.empty();\n        }\n\n        if (!Theme.cache[$cacheKey]) {\n            Theme.cache[$cacheKey] = new Theme($colors, $typography, tokens);\n        }\n\n        Theme.lastUsedTheme = Theme.cache[$cacheKey];\n\n        return Theme.cache[$cacheKey];\n    }\n\n    get colors() {\n        return this._colors;\n    }\n\n    get typography() {\n        return this._typography;\n    }\n\n    getTypographyById(id: string) {\n        return this._typographyMap[id];\n    }\n\n    getTypographyByTag(tag: string | string[]) {\n        const tags = Array.isArray(tag) ? tag : [tag];\n\n        for (const styleId in this._typographyMap) {\n            const style = this._typographyMap[styleId];\n            if (tags.includes(style.tag)) {\n                return style;\n            }\n        }\n        return undefined;\n    }\n\n    /*\n     *  Creates a map of style key ID's and typography style objects\n     */\n\n    private toTypographyMap(typography: EditorTheme[\"typography\"]): TypographyMap {\n        return Object.keys(typography).reduce((acc, key) => {\n            const items = typography[key];\n            for (const item of items) {\n                acc[item.id] = item;\n            }\n            return acc;\n        }, {} as TypographyMap);\n    }\n}\n"],"mappings":"AAWA,OAAO,MAAMA,KAAK,CAAC;EACf,OAAOC,KAAK,GAA0B,CAAC,CAAC;EACxC,OAAOC,aAAa,GAAiB,IAAI;EAMzCC,WAAWA,CACPC,MAA6B,EAC7BC,UAAqC,EACrCC,MAA0B,EAC5B;IACE,IAAI,CAACC,OAAO,GAAGH,MAAM;IACrB,IAAI,CAACI,WAAW,GAAGH,UAAU;IAC7B,IAAI,CAACI,cAAc,GAAG,IAAI,CAACC,eAAe,CAACL,UAAU,CAAC;IACtD,IAAI,CAACC,MAAM,GAAGA,MAAM;EACxB;EAEA,OAAOK,KAAKA,CAAA,EAAG;IACX,OAAO,IAAIX,KAAK,CAAC,EAAE,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;EAChC;EAEA,OAAOY,IAAIA,CAACC,YAAgC,EAAE;IAC1C,MAAM;MAAEC,OAAO;MAAEC,WAAW;MAAEC,SAAS;MAAE,GAAGV;IAAO,CAAC,GAAGO,YAA6B;IAEpF,IAAI,CAACC,OAAO,EAAE;MACV,OAAOd,KAAK,CAACE,aAAa,IAAIF,KAAK,CAACW,KAAK,CAAC,CAAC;IAC/C;IAEA,IAAI,CAACX,KAAK,CAACC,KAAK,CAACe,SAAS,CAAC,EAAE;MACzBhB,KAAK,CAACC,KAAK,CAACe,SAAS,CAAC,GAAG,IAAIhB,KAAK,CAACc,OAAO,EAAEC,WAAW,EAAET,MAAM,CAAC;IACpE;IAEAN,KAAK,CAACE,aAAa,GAAGF,KAAK,CAACC,KAAK,CAACe,SAAS,CAAC;IAE5C,OAAOhB,KAAK,CAACC,KAAK,CAACe,SAAS,CAAC;EACjC;EAEA,IAAIZ,MAAMA,CAAA,EAAG;IACT,OAAO,IAAI,CAACG,OAAO;EACvB;EAEA,IAAIF,UAAUA,CAAA,EAAG;IACb,OAAO,IAAI,CAACG,WAAW;EAC3B;EAEAS,iBAAiBA,CAACC,EAAU,EAAE;IAC1B,OAAO,IAAI,CAACT,cAAc,CAACS,EAAE,CAAC;EAClC;EAEAC,kBAAkBA,CAACC,GAAsB,EAAE;IACvC,MAAMC,IAAI,GAAGC,KAAK,CAACC,OAAO,CAACH,GAAG,CAAC,GAAGA,GAAG,GAAG,CAACA,GAAG,CAAC;IAE7C,KAAK,MAAMI,OAAO,IAAI,IAAI,CAACf,cAAc,EAAE;MACvC,MAAMgB,KAAK,GAAG,IAAI,CAAChB,cAAc,CAACe,OAAO,CAAC;MAC1C,IAAIH,IAAI,CAACK,QAAQ,CAACD,KAAK,CAACL,GAAG,CAAC,EAAE;QAC1B,OAAOK,KAAK;MAChB;IACJ;IACA,OAAOE,SAAS;EACpB;;EAEA;AACJ;AACA;;EAEYjB,eAAeA,CAACL,UAAqC,EAAiB;IAC1E,OAAOuB,MAAM,CAACC,IAAI,CAACxB,UAAU,CAAC,CAACyB,MAAM,CAAC,CAACC,GAAG,EAAEC,GAAG,KAAK;MAChD,MAAMC,KAAK,GAAG5B,UAAU,CAAC2B,GAAG,CAAC;MAC7B,KAAK,MAAME,IAAI,IAAID,KAAK,EAAE;QACtBF,GAAG,CAACG,IAAI,CAAChB,EAAE,CAAC,GAAGgB,IAAI;MACvB;MACA,OAAOH,GAAG;IACd,CAAC,EAAE,CAAC,CAAkB,CAAC;EAC3B;AACJ","ignoreList":[]}

package/createLexicalEditorTokens.d.ts

@@ -0,0 +1,2 @@
+import type { EditorThemeClasses } from "lexical";
+export declare const createLexicalTokens: (classPrefix: string) => EditorThemeClasses;

package/createLexicalEditorTokens.js

@@ -0,0 +1,100 @@
+export const createLexicalTokens = classPrefix => {
+  const withPrefix = className => {
+    return `${classPrefix}${className}`;
+  };
+  return {
+    characterLimit: withPrefix("characterLimit"),
+    code: withPrefix("code"),
+    codeHighlight: {
+      atrule: withPrefix("tokenAttr"),
+      attr: withPrefix("tokenAttr"),
+      boolean: withPrefix("tokenProperty"),
+      builtin: withPrefix("tokenSelector"),
+      cdata: withPrefix("tokenComment"),
+      char: withPrefix("tokenSelector"),
+      class: withPrefix("tokenFunction"),
+      "class-name": withPrefix("tokenFunction"),
+      comment: withPrefix("tokenComment"),
+      constant: withPrefix("tokenProperty"),
+      deleted: withPrefix("tokenProperty"),
+      doctype: withPrefix("tokenComment"),
+      entity: withPrefix("tokenOperator"),
+      function: withPrefix("tokenFunction"),
+      important: withPrefix("tokenVariable"),
+      inserted: withPrefix("tokenSelector"),
+      keyword: withPrefix("tokenAttr"),
+      namespace: withPrefix("tokenVariable"),
+      number: withPrefix("tokenProperty"),
+      operator: withPrefix("tokenOperator"),
+      prolog: withPrefix("tokenComment"),
+      property: withPrefix("tokenProperty"),
+      punctuation: withPrefix("tokenPunctuation"),
+      regex: withPrefix("tokenVariable"),
+      selector: withPrefix("tokenSelector"),
+      string: withPrefix("tokenSelector"),
+      symbol: withPrefix("tokenProperty"),
+      tag: withPrefix("tokenProperty"),
+      url: withPrefix("tokenOperator"),
+      variable: withPrefix("tokenVariable")
+    },
+    embedBlock: {
+      base: withPrefix("embedBlock"),
+      focus: withPrefix("embedBlockFocus")
+    },
+    hashtag: withPrefix("hashtag"),
+    heading: {
+      h1: withPrefix("h1"),
+      h2: withPrefix("h2"),
+      h3: withPrefix("h3"),
+      h4: withPrefix("h4"),
+      h5: withPrefix("h5"),
+      h6: withPrefix("h6")
+    },
+    link: withPrefix("link"),
+    list: {
+      listitem: withPrefix("listItem"),
+      listitemChecked: withPrefix("listItemChecked"),
+      listitemUnchecked: withPrefix("listItemUnchecked"),
+      nested: {
+        listitem: withPrefix("nestedListItem")
+      },
+      olDepth: [withPrefix("ol1"), withPrefix("ol2"), withPrefix("ol3"), withPrefix("ol4"), withPrefix("ol5")],
+      ul: withPrefix("ul")
+    },
+    ltr: withPrefix("ltr"),
+    mark: withPrefix("mark"),
+    markOverlap: withPrefix("markOverlap"),
+    paragraph: withPrefix("paragraph"),
+    quote: withPrefix("quote"),
+    rtl: withPrefix("rtl"),
+    text: {
+      bold: withPrefix("textBold"),
+      code: withPrefix("textCode"),
+      italic: withPrefix("textItalic"),
+      strikethrough: withPrefix("textStrikethrough"),
+      subscript: withPrefix("textSubscript"),
+      superscript: withPrefix("textSuperscript"),
+      underline: withPrefix("textUnderline"),
+      underlineStrikethrough: withPrefix("textUnderlineStrikethrough")
+    },
+    fontColorText: withPrefix("fontColorText"),
+    image: withPrefix("image"),
+    indent: withPrefix("indent"),
+    inlineImage: withPrefix("inline-image"),
+    table: withPrefix("table"),
+    tableAddColumns: withPrefix("tableAddColumns"),
+    tableAddRows: withPrefix("tableAddRows"),
+    tableCellActionButton: withPrefix("tableCellActionButton"),
+    tableCellActionButtonContainer: withPrefix("tableCellActionButtonContainer"),
+    tableCellSelected: withPrefix("tableCellSelected"),
+    tableCell: withPrefix("tableCell"),
+    tableCellHeader: withPrefix("tableCellHeader"),
+    tableCellResizer: withPrefix("tableCellResizer"),
+    tableRow: withPrefix("tableRow"),
+    tableScrollableWrapper: withPrefix("tableScrollableWrapper"),
+    tableSelected: withPrefix("tableSelected"),
+    tableSelection: withPrefix("tableSelection")
+  };
+};
+
+//# sourceMappingURL=createLexicalEditorTokens.js.map

package/createLexicalEditorTokens.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["createLexicalTokens","classPrefix","withPrefix","className","characterLimit","code","codeHighlight","atrule","attr","boolean","builtin","cdata","char","class","comment","constant","deleted","doctype","entity","function","important","inserted","keyword","namespace","number","operator","prolog","property","punctuation","regex","selector","string","symbol","tag","url","variable","embedBlock","base","focus","hashtag","heading","h1","h2","h3","h4","h5","h6","link","list","listitem","listitemChecked","listitemUnchecked","nested","olDepth","ul","ltr","mark","markOverlap","paragraph","quote","rtl","text","bold","italic","strikethrough","subscript","superscript","underline","underlineStrikethrough","fontColorText","image","indent","inlineImage","table","tableAddColumns","tableAddRows","tableCellActionButton","tableCellActionButtonContainer","tableCellSelected","tableCell","tableCellHeader","tableCellResizer","tableRow","tableScrollableWrapper","tableSelected","tableSelection"],"sources":["createLexicalEditorTokens.ts"],"sourcesContent":["import type { EditorThemeClasses } from \"lexical\";\n\nexport const createLexicalTokens = (classPrefix: string): EditorThemeClasses => {\n    const withPrefix = (className: string) => {\n        return `${classPrefix}${className}`;\n    };\n\n    return {\n        characterLimit: withPrefix(\"characterLimit\"),\n        code: withPrefix(\"code\"),\n        codeHighlight: {\n            atrule: withPrefix(\"tokenAttr\"),\n            attr: withPrefix(\"tokenAttr\"),\n            boolean: withPrefix(\"tokenProperty\"),\n            builtin: withPrefix(\"tokenSelector\"),\n            cdata: withPrefix(\"tokenComment\"),\n            char: withPrefix(\"tokenSelector\"),\n            class: withPrefix(\"tokenFunction\"),\n            \"class-name\": withPrefix(\"tokenFunction\"),\n            comment: withPrefix(\"tokenComment\"),\n            constant: withPrefix(\"tokenProperty\"),\n            deleted: withPrefix(\"tokenProperty\"),\n            doctype: withPrefix(\"tokenComment\"),\n            entity: withPrefix(\"tokenOperator\"),\n            function: withPrefix(\"tokenFunction\"),\n            important: withPrefix(\"tokenVariable\"),\n            inserted: withPrefix(\"tokenSelector\"),\n            keyword: withPrefix(\"tokenAttr\"),\n            namespace: withPrefix(\"tokenVariable\"),\n            number: withPrefix(\"tokenProperty\"),\n            operator: withPrefix(\"tokenOperator\"),\n            prolog: withPrefix(\"tokenComment\"),\n            property: withPrefix(\"tokenProperty\"),\n            punctuation: withPrefix(\"tokenPunctuation\"),\n            regex: withPrefix(\"tokenVariable\"),\n            selector: withPrefix(\"tokenSelector\"),\n            string: withPrefix(\"tokenSelector\"),\n            symbol: withPrefix(\"tokenProperty\"),\n            tag: withPrefix(\"tokenProperty\"),\n            url: withPrefix(\"tokenOperator\"),\n            variable: withPrefix(\"tokenVariable\")\n        },\n        embedBlock: {\n            base: withPrefix(\"embedBlock\"),\n            focus: withPrefix(\"embedBlockFocus\")\n        },\n        hashtag: withPrefix(\"hashtag\"),\n        heading: {\n            h1: withPrefix(\"h1\"),\n            h2: withPrefix(\"h2\"),\n            h3: withPrefix(\"h3\"),\n            h4: withPrefix(\"h4\"),\n            h5: withPrefix(\"h5\"),\n            h6: withPrefix(\"h6\")\n        },\n        link: withPrefix(\"link\"),\n        list: {\n            listitem: withPrefix(\"listItem\"),\n            listitemChecked: withPrefix(\"listItemChecked\"),\n            listitemUnchecked: withPrefix(\"listItemUnchecked\"),\n            nested: {\n                listitem: withPrefix(\"nestedListItem\")\n            },\n            olDepth: [\n                withPrefix(\"ol1\"),\n                withPrefix(\"ol2\"),\n                withPrefix(\"ol3\"),\n                withPrefix(\"ol4\"),\n                withPrefix(\"ol5\")\n            ],\n            ul: withPrefix(\"ul\")\n        },\n        ltr: withPrefix(\"ltr\"),\n        mark: withPrefix(\"mark\"),\n        markOverlap: withPrefix(\"markOverlap\"),\n        paragraph: withPrefix(\"paragraph\"),\n        quote: withPrefix(\"quote\"),\n        rtl: withPrefix(\"rtl\"),\n        text: {\n            bold: withPrefix(\"textBold\"),\n            code: withPrefix(\"textCode\"),\n            italic: withPrefix(\"textItalic\"),\n            strikethrough: withPrefix(\"textStrikethrough\"),\n            subscript: withPrefix(\"textSubscript\"),\n            superscript: withPrefix(\"textSuperscript\"),\n            underline: withPrefix(\"textUnderline\"),\n            underlineStrikethrough: withPrefix(\"textUnderlineStrikethrough\")\n        },\n        fontColorText: withPrefix(\"fontColorText\"),\n        image: withPrefix(\"image\"),\n        indent: withPrefix(\"indent\"),\n        inlineImage: withPrefix(\"inline-image\"),\n        table: withPrefix(\"table\"),\n        tableAddColumns: withPrefix(\"tableAddColumns\"),\n        tableAddRows: withPrefix(\"tableAddRows\"),\n        tableCellActionButton: withPrefix(\"tableCellActionButton\"),\n        tableCellActionButtonContainer: withPrefix(\"tableCellActionButtonContainer\"),\n        tableCellSelected: withPrefix(\"tableCellSelected\"),\n        tableCell: withPrefix(\"tableCell\"),\n        tableCellHeader: withPrefix(\"tableCellHeader\"),\n        tableCellResizer: withPrefix(\"tableCellResizer\"),\n        tableRow: withPrefix(\"tableRow\"),\n        tableScrollableWrapper: withPrefix(\"tableScrollableWrapper\"),\n        tableSelected: withPrefix(\"tableSelected\"),\n        tableSelection: withPrefix(\"tableSelection\")\n    };\n};\n"],"mappings":"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","ignoreList":[]}

package/createTheme.d.ts

@@ -1,9 +1,7 @@
-import type { EditorThemeClasses } from "lexical";
-import "./theme.css";
-import { ThemeEmotionMap } from "./types";
-export declare type WebinyTheme = {
-    styles?: Record<string, any>;
-    emotionMap?: ThemeEmotionMap;
-};
-export declare type EditorTheme = WebinyTheme & EditorThemeClasses;
-export declare const createTheme: () => EditorTheme;
+import type { ColorValue, EditorTheme, TypographyValue } from "./types.js";
+export interface CreateThemeParams {
+    colors: ColorValue[];
+    typography: Record<string, TypographyValue[]>;
+    lexicalTokenPrefix: string;
+}
+export declare const createTheme: (params: CreateThemeParams) => EditorTheme;

package/createTheme.js

@@ -1,95 +1,10 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.createTheme = void 0;
-require("./theme.css");
-const defaultTheme = {
-  styles: undefined,
-  emotionMap: undefined,
-  characterLimit: "WebinyLexical__characterLimit",
-  code: "WebinyLexical__code",
-  codeHighlight: {
-    atrule: "WebinyLexical__tokenAttr",
-    attr: "WebinyLexical__tokenAttr",
-    boolean: "WebinyLexical__tokenProperty",
-    builtin: "WebinyLexical__tokenSelector",
-    cdata: "WebinyLexical__tokenComment",
-    char: "WebinyLexical__tokenSelector",
-    class: "WebinyLexical__tokenFunction",
-    "class-name": "WebinyLexical__tokenFunction",
-    comment: "WebinyLexical__tokenComment",
-    constant: "WebinyLexical__tokenProperty",
-    deleted: "WebinyLexical__tokenProperty",
-    doctype: "WebinyLexical__tokenComment",
-    entity: "WebinyLexical__tokenOperator",
-    function: "WebinyLexical__tokenFunction",
-    important: "WebinyLexical__tokenVariable",
-    inserted: "WebinyLexical__tokenSelector",
-    keyword: "WebinyLexical__tokenAttr",
-    namespace: "WebinyLexical__tokenVariable",
-    number: "WebinyLexical__tokenProperty",
-    operator: "WebinyLexical__tokenOperator",
-    prolog: "WebinyLexical__tokenComment",
-    property: "WebinyLexical__tokenProperty",
-    punctuation: "WebinyLexical__tokenPunctuation",
-    regex: "WebinyLexical__tokenVariable",
-    selector: "WebinyLexical__tokenSelector",
-    string: "WebinyLexical__tokenSelector",
-    symbol: "WebinyLexical__tokenProperty",
-    tag: "WebinyLexical__tokenProperty",
-    url: "WebinyLexical__tokenOperator",
-    variable: "WebinyLexical__tokenVariable"
-  },
-  embedBlock: {
-    base: "WebinyLexical__embedBlock",
-    focus: "WebinyLexical__embedBlockFocus"
-  },
-  hashtag: "WebinyLexical__hashtag",
-  heading: {
-    h1: "WebinyLexical__h1",
-    h2: "WebinyLexical__h2",
-    h3: "WebinyLexical__h3",
-    h4: "WebinyLexical__h4",
-    h5: "WebinyLexical__h5",
-    h6: "WebinyLexical__h6"
-  },
-  link: "WebinyLexical__link",
-  list: {
-    listitem: "WebinyLexical__listItem",
-    listitemChecked: "WebinyLexical__listItemChecked",
-    listitemUnchecked: "WebinyLexical__listItemUnchecked",
-    nested: {
-      listitem: "WebinyLexical__nestedListItem"
-    },
-    olDepth: ["WebinyLexical__ol1", "WebinyLexical__ol2", "WebinyLexical__ol3", "WebinyLexical__ol4", "WebinyLexical__ol5"],
-    ul: "WebinyLexical__ul"
-  },
-  ltr: "WebinyLexical__ltr",
-  mark: "WebinyLexical__mark",
-  markOverlap: "WebinyLexical__markOverlap",
-  paragraph: "WebinyLexical__paragraph",
-  quote: "WebinyLexical__quote",
-  rtl: "WebinyLexical__rtl",
-  text: {
-    bold: "WebinyLexical__textBold",
-    code: "WebinyLexical__textCode",
-    italic: "WebinyLexical__textItalic",
-    strikethrough: "WebinyLexical__textStrikethrough",
-    subscript: "WebinyLexical__textSubscript",
-    superscript: "WebinyLexical__textSuperscript",
-    underline: "WebinyLexical__textUnderline",
-    underlineStrikethrough: "WebinyLexical__textUnderlineStrikethrough"
-  },
-  fontColorText: "WebinyLexical__fontColorText",
-  image: "editor-image",
-  indent: "PlaygroundEditorTheme__indent",
-  inlineImage: "inline-editor-image"
-};
-const createTheme = () => {
-  return defaultTheme;
+import { createLexicalTokens } from "./createLexicalEditorTokens.js";
+export const createTheme = params => {
+  return {
+    colors: params.colors,
+    typography: params.typography,
+    tokens: createLexicalTokens(params.lexicalTokenPrefix)
+  };
 };
-exports.createTheme = createTheme;
 
 //# sourceMappingURL=createTheme.js.map

package/createTheme.js.map

@@ -1 +1 @@
-{"version":3,"names":["require","defaultTheme","styles","undefined","emotionMap","characterLimit","code","codeHighlight","atrule","attr","boolean","builtin","cdata","char","class","comment","constant","deleted","doctype","entity","function","important","inserted","keyword","namespace","number","operator","prolog","property","punctuation","regex","selector","string","symbol","tag","url","variable","embedBlock","base","focus","hashtag","heading","h1","h2","h3","h4","h5","h6","link","list","listitem","listitemChecked","listitemUnchecked","nested","olDepth","ul","ltr","mark","markOverlap","paragraph","quote","rtl","text","bold","italic","strikethrough","subscript","superscript","underline","underlineStrikethrough","fontColorText","image","indent","inlineImage","createTheme","exports"],"sources":["createTheme.ts"],"sourcesContent":["import type { EditorThemeClasses } from \"lexical\";\n\nimport \"./theme.css\";\nimport { ThemeEmotionMap } from \"~/types\";\n\nexport type WebinyTheme = {\n    styles?: Record<string, any>;\n    emotionMap?: ThemeEmotionMap;\n};\n\nexport type EditorTheme = WebinyTheme & EditorThemeClasses;\n\nconst defaultTheme: EditorTheme = {\n    styles: undefined,\n    emotionMap: undefined,\n    characterLimit: \"WebinyLexical__characterLimit\",\n    code: \"WebinyLexical__code\",\n    codeHighlight: {\n        atrule: \"WebinyLexical__tokenAttr\",\n        attr: \"WebinyLexical__tokenAttr\",\n        boolean: \"WebinyLexical__tokenProperty\",\n        builtin: \"WebinyLexical__tokenSelector\",\n        cdata: \"WebinyLexical__tokenComment\",\n        char: \"WebinyLexical__tokenSelector\",\n        class: \"WebinyLexical__tokenFunction\",\n        \"class-name\": \"WebinyLexical__tokenFunction\",\n        comment: \"WebinyLexical__tokenComment\",\n        constant: \"WebinyLexical__tokenProperty\",\n        deleted: \"WebinyLexical__tokenProperty\",\n        doctype: \"WebinyLexical__tokenComment\",\n        entity: \"WebinyLexical__tokenOperator\",\n        function: \"WebinyLexical__tokenFunction\",\n        important: \"WebinyLexical__tokenVariable\",\n        inserted: \"WebinyLexical__tokenSelector\",\n        keyword: \"WebinyLexical__tokenAttr\",\n        namespace: \"WebinyLexical__tokenVariable\",\n        number: \"WebinyLexical__tokenProperty\",\n        operator: \"WebinyLexical__tokenOperator\",\n        prolog: \"WebinyLexical__tokenComment\",\n        property: \"WebinyLexical__tokenProperty\",\n        punctuation: \"WebinyLexical__tokenPunctuation\",\n        regex: \"WebinyLexical__tokenVariable\",\n        selector: \"WebinyLexical__tokenSelector\",\n        string: \"WebinyLexical__tokenSelector\",\n        symbol: \"WebinyLexical__tokenProperty\",\n        tag: \"WebinyLexical__tokenProperty\",\n        url: \"WebinyLexical__tokenOperator\",\n        variable: \"WebinyLexical__tokenVariable\"\n    },\n    embedBlock: {\n        base: \"WebinyLexical__embedBlock\",\n        focus: \"WebinyLexical__embedBlockFocus\"\n    },\n    hashtag: \"WebinyLexical__hashtag\",\n    heading: {\n        h1: \"WebinyLexical__h1\",\n        h2: \"WebinyLexical__h2\",\n        h3: \"WebinyLexical__h3\",\n        h4: \"WebinyLexical__h4\",\n        h5: \"WebinyLexical__h5\",\n        h6: \"WebinyLexical__h6\"\n    },\n    link: \"WebinyLexical__link\",\n    list: {\n        listitem: \"WebinyLexical__listItem\",\n        listitemChecked: \"WebinyLexical__listItemChecked\",\n        listitemUnchecked: \"WebinyLexical__listItemUnchecked\",\n        nested: {\n            listitem: \"WebinyLexical__nestedListItem\"\n        },\n        olDepth: [\n            \"WebinyLexical__ol1\",\n            \"WebinyLexical__ol2\",\n            \"WebinyLexical__ol3\",\n            \"WebinyLexical__ol4\",\n            \"WebinyLexical__ol5\"\n        ],\n        ul: \"WebinyLexical__ul\"\n    },\n    ltr: \"WebinyLexical__ltr\",\n    mark: \"WebinyLexical__mark\",\n    markOverlap: \"WebinyLexical__markOverlap\",\n    paragraph: \"WebinyLexical__paragraph\",\n    quote: \"WebinyLexical__quote\",\n    rtl: \"WebinyLexical__rtl\",\n    text: {\n        bold: \"WebinyLexical__textBold\",\n        code: \"WebinyLexical__textCode\",\n        italic: \"WebinyLexical__textItalic\",\n        strikethrough: \"WebinyLexical__textStrikethrough\",\n        subscript: \"WebinyLexical__textSubscript\",\n        superscript: \"WebinyLexical__textSuperscript\",\n        underline: \"WebinyLexical__textUnderline\",\n        underlineStrikethrough: \"WebinyLexical__textUnderlineStrikethrough\"\n    },\n    fontColorText: \"WebinyLexical__fontColorText\",\n    image: \"editor-image\",\n    indent: \"PlaygroundEditorTheme__indent\",\n    inlineImage: \"inline-editor-image\"\n};\n\nexport const createTheme = (): EditorTheme => {\n    return defaultTheme;\n};\n"],"mappings":";;;;;;AAEAA,OAAA;AAUA,MAAMC,YAAyB,GAAG;EAC9BC,MAAM,EAAEC,SAAS;EACjBC,UAAU,EAAED,SAAS;EACrBE,cAAc,EAAE,+BAA+B;EAC/CC,IAAI,EAAE,qBAAqB;EAC3BC,aAAa,EAAE;IACXC,MAAM,EAAE,0BAA0B;IAClCC,IAAI,EAAE,0BAA0B;IAChCC,OAAO,EAAE,8BAA8B;IACvCC,OAAO,EAAE,8BAA8B;IACvCC,KAAK,EAAE,6BAA6B;IACpCC,IAAI,EAAE,8BAA8B;IACpCC,KAAK,EAAE,8BAA8B;IACrC,YAAY,EAAE,8BAA8B;IAC5CC,OAAO,EAAE,6BAA6B;IACtCC,QAAQ,EAAE,8BAA8B;IACxCC,OAAO,EAAE,8BAA8B;IACvCC,OAAO,EAAE,6BAA6B;IACtCC,MAAM,EAAE,8BAA8B;IACtCC,QAAQ,EAAE,8BAA8B;IACxCC,SAAS,EAAE,8BAA8B;IACzCC,QAAQ,EAAE,8BAA8B;IACxCC,OAAO,EAAE,0BAA0B;IACnCC,SAAS,EAAE,8BAA8B;IACzCC,MAAM,EAAE,8BAA8B;IACtCC,QAAQ,EAAE,8BAA8B;IACxCC,MAAM,EAAE,6BAA6B;IACrCC,QAAQ,EAAE,8BAA8B;IACxCC,WAAW,EAAE,iCAAiC;IAC9CC,KAAK,EAAE,8BAA8B;IACrCC,QAAQ,EAAE,8BAA8B;IACxCC,MAAM,EAAE,8BAA8B;IACtCC,MAAM,EAAE,8BAA8B;IACtCC,GAAG,EAAE,8BAA8B;IACnCC,GAAG,EAAE,8BAA8B;IACnCC,QAAQ,EAAE;EACd,CAAC;EACDC,UAAU,EAAE;IACRC,IAAI,EAAE,2BAA2B;IACjCC,KAAK,EAAE;EACX,CAAC;EACDC,OAAO,EAAE,wBAAwB;EACjCC,OAAO,EAAE;IACLC,EAAE,EAAE,mBAAmB;IACvBC,EAAE,EAAE,mBAAmB;IACvBC,EAAE,EAAE,mBAAmB;IACvBC,EAAE,EAAE,mBAAmB;IACvBC,EAAE,EAAE,mBAAmB;IACvBC,EAAE,EAAE;EACR,CAAC;EACDC,IAAI,EAAE,qBAAqB;EAC3BC,IAAI,EAAE;IACFC,QAAQ,EAAE,yBAAyB;IACnCC,eAAe,EAAE,gCAAgC;IACjDC,iBAAiB,EAAE,kCAAkC;IACrDC,MAAM,EAAE;MACJH,QAAQ,EAAE;IACd,CAAC;IACDI,OAAO,EAAE,CACL,oBAAoB,EACpB,oBAAoB,EACpB,oBAAoB,EACpB,oBAAoB,EACpB,oBAAoB,CACvB;IACDC,EAAE,EAAE;EACR,CAAC;EACDC,GAAG,EAAE,oBAAoB;EACzBC,IAAI,EAAE,qBAAqB;EAC3BC,WAAW,EAAE,4BAA4B;EACzCC,SAAS,EAAE,0BAA0B;EACrCC,KAAK,EAAE,sBAAsB;EAC7BC,GAAG,EAAE,oBAAoB;EACzBC,IAAI,EAAE;IACFC,IAAI,EAAE,yBAAyB;IAC/BzD,IAAI,EAAE,yBAAyB;IAC/B0D,MAAM,EAAE,2BAA2B;IACnCC,aAAa,EAAE,kCAAkC;IACjDC,SAAS,EAAE,8BAA8B;IACzCC,WAAW,EAAE,gCAAgC;IAC7CC,SAAS,EAAE,8BAA8B;IACzCC,sBAAsB,EAAE;EAC5B,CAAC;EACDC,aAAa,EAAE,8BAA8B;EAC7CC,KAAK,EAAE,cAAc;EACrBC,MAAM,EAAE,+BAA+B;EACvCC,WAAW,EAAE;AACjB,CAAC;AAEM,MAAMC,WAAW,GAAGA,CAAA,KAAmB;EAC1C,OAAOzE,YAAY;AACvB,CAAC;AAAC0E,OAAA,CAAAD,WAAA,GAAAA,WAAA","ignoreList":[]}
+{"version":3,"names":["createLexicalTokens","createTheme","params","colors","typography","tokens","lexicalTokenPrefix"],"sources":["createTheme.ts"],"sourcesContent":["import type { ColorValue, EditorTheme, TypographyValue } from \"~/types.js\";\nimport { createLexicalTokens } from \"~/createLexicalEditorTokens.js\";\n\nexport interface CreateThemeParams {\n    colors: ColorValue[];\n    typography: Record<string, TypographyValue[]>;\n    lexicalTokenPrefix: string;\n}\n\nexport const createTheme = (params: CreateThemeParams): EditorTheme => {\n    return {\n        colors: params.colors,\n        typography: params.typography,\n        tokens: createLexicalTokens(params.lexicalTokenPrefix)\n    };\n};\n"],"mappings":"AACA,SAASA,mBAAmB;AAQ5B,OAAO,MAAMC,WAAW,GAAIC,MAAyB,IAAkB;EACnE,OAAO;IACHC,MAAM,EAAED,MAAM,CAACC,MAAM;IACrBC,UAAU,EAAEF,MAAM,CAACE,UAAU;IAC7BC,MAAM,EAAEL,mBAAmB,CAACE,MAAM,CAACI,kBAAkB;EACzD,CAAC;AACL,CAAC","ignoreList":[]}

package/index.d.ts

@@ -1,5 +1,4 @@
-export * from "./createTheme";
-export * from "./types";
-export * from "./utils/findTypographyStyleByHtmlTag";
-export * from "./utils/toTypographyEmotionMap";
-export * from "./utils/styleObjectToString";
+export * from "./createTheme.js";
+export * from "./types.js";
+export * from "./Theme.js";
+export * from "./toTypographyMap.js";

package/index.js

@@ -1,62 +1,6 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-var _createTheme = require("./createTheme");
-Object.keys(_createTheme).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (key in exports && exports[key] === _createTheme[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function () {
-      return _createTheme[key];
-    }
-  });
-});
-var _types = require("./types");
-Object.keys(_types).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (key in exports && exports[key] === _types[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function () {
-      return _types[key];
-    }
-  });
-});
-var _findTypographyStyleByHtmlTag = require("./utils/findTypographyStyleByHtmlTag");
-Object.keys(_findTypographyStyleByHtmlTag).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (key in exports && exports[key] === _findTypographyStyleByHtmlTag[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function () {
-      return _findTypographyStyleByHtmlTag[key];
-    }
-  });
-});
-var _toTypographyEmotionMap = require("./utils/toTypographyEmotionMap");
-Object.keys(_toTypographyEmotionMap).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (key in exports && exports[key] === _toTypographyEmotionMap[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function () {
-      return _toTypographyEmotionMap[key];
-    }
-  });
-});
-var _styleObjectToString = require("./utils/styleObjectToString");
-Object.keys(_styleObjectToString).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (key in exports && exports[key] === _styleObjectToString[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function () {
-      return _styleObjectToString[key];
-    }
-  });
-});
+export * from "./createTheme.js";
+export * from "./types.js";
+export * from "./Theme.js";
+export * from "./toTypographyMap.js";
 
 //# sourceMappingURL=index.js.map

package/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["_createTheme","require","Object","keys","forEach","key","exports","defineProperty","enumerable","get","_types","_findTypographyStyleByHtmlTag","_toTypographyEmotionMap","_styleObjectToString"],"sources":["index.ts"],"sourcesContent":["export * from \"./createTheme\";\nexport * from \"./types\";\nexport * from \"./utils/findTypographyStyleByHtmlTag\";\nexport * from \"./utils/toTypographyEmotionMap\";\nexport * from \"./utils/styleObjectToString\";\n"],"mappings":";;;;;AAAA,IAAAA,YAAA,GAAAC,OAAA;AAAAC,MAAA,CAAAC,IAAA,CAAAH,YAAA,EAAAI,OAAA,WAAAC,GAAA;EAAA,IAAAA,GAAA,kBAAAA,GAAA;EAAA,IAAAA,GAAA,IAAAC,OAAA,IAAAA,OAAA,CAAAD,GAAA,MAAAL,YAAA,CAAAK,GAAA;EAAAH,MAAA,CAAAK,cAAA,CAAAD,OAAA,EAAAD,GAAA;IAAAG,UAAA;IAAAC,GAAA,WAAAA,CAAA;MAAA,OAAAT,YAAA,CAAAK,GAAA;IAAA;EAAA;AAAA;AACA,IAAAK,MAAA,GAAAT,OAAA;AAAAC,MAAA,CAAAC,IAAA,CAAAO,MAAA,EAAAN,OAAA,WAAAC,GAAA;EAAA,IAAAA,GAAA,kBAAAA,GAAA;EAAA,IAAAA,GAAA,IAAAC,OAAA,IAAAA,OAAA,CAAAD,GAAA,MAAAK,MAAA,CAAAL,GAAA;EAAAH,MAAA,CAAAK,cAAA,CAAAD,OAAA,EAAAD,GAAA;IAAAG,UAAA;IAAAC,GAAA,WAAAA,CAAA;MAAA,OAAAC,MAAA,CAAAL,GAAA;IAAA;EAAA;AAAA;AACA,IAAAM,6BAAA,GAAAV,OAAA;AAAAC,MAAA,CAAAC,IAAA,CAAAQ,6BAAA,EAAAP,OAAA,WAAAC,GAAA;EAAA,IAAAA,GAAA,kBAAAA,GAAA;EAAA,IAAAA,GAAA,IAAAC,OAAA,IAAAA,OAAA,CAAAD,GAAA,MAAAM,6BAAA,CAAAN,GAAA;EAAAH,MAAA,CAAAK,cAAA,CAAAD,OAAA,EAAAD,GAAA;IAAAG,UAAA;IAAAC,GAAA,WAAAA,CAAA;MAAA,OAAAE,6BAAA,CAAAN,GAAA;IAAA;EAAA;AAAA;AACA,IAAAO,uBAAA,GAAAX,OAAA;AAAAC,MAAA,CAAAC,IAAA,CAAAS,uBAAA,EAAAR,OAAA,WAAAC,GAAA;EAAA,IAAAA,GAAA,kBAAAA,GAAA;EAAA,IAAAA,GAAA,IAAAC,OAAA,IAAAA,OAAA,CAAAD,GAAA,MAAAO,uBAAA,CAAAP,GAAA;EAAAH,MAAA,CAAAK,cAAA,CAAAD,OAAA,EAAAD,GAAA;IAAAG,UAAA;IAAAC,GAAA,WAAAA,CAAA;MAAA,OAAAG,uBAAA,CAAAP,GAAA;IAAA;EAAA;AAAA;AACA,IAAAQ,oBAAA,GAAAZ,OAAA;AAAAC,MAAA,CAAAC,IAAA,CAAAU,oBAAA,EAAAT,OAAA,WAAAC,GAAA;EAAA,IAAAA,GAAA,kBAAAA,GAAA;EAAA,IAAAA,GAAA,IAAAC,OAAA,IAAAA,OAAA,CAAAD,GAAA,MAAAQ,oBAAA,CAAAR,GAAA;EAAAH,MAAA,CAAAK,cAAA,CAAAD,OAAA,EAAAD,GAAA;IAAAG,UAAA;IAAAC,GAAA,WAAAA,CAAA;MAAA,OAAAI,oBAAA,CAAAR,GAAA;IAAA;EAAA;AAAA","ignoreList":[]}
+{"version":3,"names":[],"sources":["index.ts"],"sourcesContent":["export * from \"./createTheme.js\";\nexport * from \"./types.js\";\nexport * from \"./Theme.js\";\nexport * from \"./toTypographyMap.js\";\n"],"mappings":"AAAA;AACA;AACA;AACA","ignoreList":[]}

package/package.json

@@ -1,23 +1,16 @@
 {
 	"name": "@webiny/lexical-theme",
-	"version": "6.0.0-beta.0",
+	"version": "6.0.0-rc.0",
+	"type": "module",
 	"dependencies": {
-		"@emotion/react": "11.10.8",
-		"emotion": "10.0.27",
-		"lexical": "0.12.2",
-		"react-style-object-to-css": "1.1.2"
+		"lexical": "0.40.0"
 	},
 	"devDependencies": {
-		"@webiny/cli": "6.0.0-beta.0",
-		"@webiny/project-utils": "6.0.0-beta.0"
+		"@webiny/build-tools": "6.0.0-rc.0"
 	},
 	"publishConfig": {
 		"access": "public",
 		"directory": "dist"
 	},
-	"scripts": {
-		"build": "yarn webiny run build",
-		"watch": "yarn webiny run watch"
-	},
-	"gitHead": "aa8dbfbbd5ad13ec271adba6f2431e02991a300f"
+	"gitHead": "0f2aa699f4642e550ab62c96fcd050e8d02345c9"
 }

package/theme.css

@@ -87,8 +87,11 @@
   border-bottom: 1px solid rgba(88, 144, 255, 0.3);
 }
 .WebinyLexical__link {
-  color: rgb(33, 111, 219);
+  color: #fa5723;
   text-decoration: none;
+  > * {
+    color: inherit !important;
+  }
 }
 .WebinyLexical__link:hover {
   text-decoration: underline;
@@ -319,7 +322,7 @@
 }
 .WebinyLexical__listItemUnchecked:before,
 .WebinyLexical__listItemChecked:before {
-  content: '';
+  content: "";
   width: 16px;
   height: 16px;
   top: 2px;
@@ -329,8 +332,8 @@
   background-size: cover;
   position: absolute;
 }
-.WebinyLexical__listItemUnchecked[dir='rtl']:before,
-.WebinyLexical__listItemChecked[dir='rtl']:before {
+.WebinyLexical__listItemUnchecked[dir="rtl"]:before,
+.WebinyLexical__listItemChecked[dir="rtl"]:before {
   left: auto;
   right: 0;
 }
@@ -350,7 +353,7 @@
   background-repeat: no-repeat;
 }
 .WebinyLexical__listItemChecked:after {
-  content: '';
+  content: "";
   cursor: pointer;
   border-color: #fff;
   border-style: solid;

package/toTypographyMap.d.ts

@@ -0,0 +1,2 @@
+import type { EditorTheme, TypographyMap } from "./types.js";
+export declare const toTypographyMap: (theme: EditorTheme) => TypographyMap;

package/toTypographyMap.js

@@ -0,0 +1,14 @@
+export const toTypographyMap = theme => {
+  const typographyStyles = theme.typography;
+  if (!typographyStyles) {
+    return {};
+  }
+  return Object.keys(typographyStyles).reduce((acc, key) => {
+    for (const style of typographyStyles[key]) {
+      acc[style.id] = style;
+    }
+    return acc;
+  }, {});
+};
+
+//# sourceMappingURL=toTypographyMap.js.map

package/toTypographyMap.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["toTypographyMap","theme","typographyStyles","typography","Object","keys","reduce","acc","key","style","id"],"sources":["toTypographyMap.ts"],"sourcesContent":["import type { EditorTheme, TypographyMap } from \"~/types.js\";\n\nexport const toTypographyMap = (theme: EditorTheme): TypographyMap => {\n    const typographyStyles = theme.typography;\n    if (!typographyStyles) {\n        return {};\n    }\n\n    return Object.keys(typographyStyles).reduce((acc, key) => {\n        for (const style of typographyStyles[key]) {\n            acc[style.id] = style;\n        }\n        return acc;\n    }, {} as TypographyMap);\n};\n"],"mappings":"AAEA,OAAO,MAAMA,eAAe,GAAIC,KAAkB,IAAoB;EAClE,MAAMC,gBAAgB,GAAGD,KAAK,CAACE,UAAU;EACzC,IAAI,CAACD,gBAAgB,EAAE;IACnB,OAAO,CAAC,CAAC;EACb;EAEA,OAAOE,MAAM,CAACC,IAAI,CAACH,gBAAgB,CAAC,CAACI,MAAM,CAAC,CAACC,GAAG,EAAEC,GAAG,KAAK;IACtD,KAAK,MAAMC,KAAK,IAAIP,gBAAgB,CAACM,GAAG,CAAC,EAAE;MACvCD,GAAG,CAACE,KAAK,CAACC,EAAE,CAAC,GAAGD,KAAK;IACzB;IACA,OAAOF,GAAG;EACd,CAAC,EAAE,CAAC,CAAkB,CAAC;AAC3B,CAAC","ignoreList":[]}

package/types.d.ts

@@ -1,21 +1,18 @@
-import type { CSSObject } from "@emotion/react";
-export declare type ListHtmlTag = "ol" | "ul";
-export declare type HeadingHtmlTag = "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
-export declare type ParagraphHtmlTag = "p";
-export declare type QuoteBlockHtmlTag = "quoteblock";
-export declare type TypographyHTMLTag = HeadingHtmlTag | ParagraphHtmlTag | ListHtmlTag | QuoteBlockHtmlTag;
-export declare type TypographyValue = {
-    css: CSSObject;
+import type { EditorThemeClasses } from "lexical";
+export type ColorValue = {
     id: string;
-    tag: TypographyHTMLTag;
-    name: string;
+    label: string;
+    value: string;
 };
-export declare type ThemeEmotionMap = {
-    [styleId: string]: {
-        id: string;
-        tag: TypographyHTMLTag;
-        name: string;
-        styles: Record<string, any>;
-        className: string;
-    };
+export type TypographyValue = {
+    id: string;
+    tag: string;
+    label: string;
+    className: string;
+};
+export type EditorTheme = {
+    colors: ColorValue[];
+    typography: Record<string, TypographyValue[]>;
+    tokens: EditorThemeClasses;
 };
+export type TypographyMap = Record<string, TypographyValue>;

package/types.js

@@ -1,7 +1,3 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
+export {};
 
 //# sourceMappingURL=types.js.map

package/types.js.map

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["types.ts"],"sourcesContent":["import type { CSSObject } from \"@emotion/react\";\n\n// Supported HTML tags.\nexport type ListHtmlTag = \"ol\" | \"ul\";\nexport type HeadingHtmlTag = \"h1\" | \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\";\nexport type ParagraphHtmlTag = \"p\";\nexport type QuoteBlockHtmlTag = \"quoteblock\";\n\nexport type TypographyHTMLTag = HeadingHtmlTag | ParagraphHtmlTag | ListHtmlTag | QuoteBlockHtmlTag;\n\nexport type TypographyValue = {\n    css: CSSObject;\n    id: string;\n    tag: TypographyHTMLTag;\n    name: string;\n};\n\n/*\n * Contains IDs of the styles and classes generated by Emotion.\n */\nexport type ThemeEmotionMap = {\n    [styleId: string]: {\n        id: string;\n        tag: TypographyHTMLTag;\n        name: string;\n        styles: Record<string, any>;\n        // emotion generated class\n        className: string;\n    };\n};\n"],"mappings":"","ignoreList":[]}
+{"version":3,"names":[],"sources":["types.ts"],"sourcesContent":["import type { EditorThemeClasses } from \"lexical\";\n\nexport type ColorValue = {\n    id: string;\n    label: string;\n    value: string;\n};\n\nexport type TypographyValue = {\n    id: string;\n    tag: string;\n    label: string;\n    className: string;\n};\n\nexport type EditorTheme = {\n    colors: ColorValue[];\n    typography: Record<string, TypographyValue[]>;\n    tokens: EditorThemeClasses;\n};\n\nexport type TypographyMap = Record<string, TypographyValue>;\n"],"mappings":"","ignoreList":[]}

package/utils/findTypographyStyleByHtmlTag.d.ts

@@ -1,8 +0,0 @@
-import { ThemeEmotionMap } from "../types";
-export declare const findTypographyStyleByHtmlTag: (htmlTag: string, themeEmotionMap: ThemeEmotionMap) => {
-    id: string;
-    tag: import("../types").TypographyHTMLTag;
-    name: string;
-    styles: Record<string, any>;
-    className: string;
-} | undefined;

package/utils/findTypographyStyleByHtmlTag.js

@@ -1,18 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.findTypographyStyleByHtmlTag = void 0;
-const findTypographyStyleByHtmlTag = (htmlTag, themeEmotionMap) => {
-  for (const styleId in themeEmotionMap) {
-    const style = themeEmotionMap[styleId];
-    if (style.tag === htmlTag) {
-      return style;
-    }
-  }
-  return undefined;
-};
-exports.findTypographyStyleByHtmlTag = findTypographyStyleByHtmlTag;
-
-//# sourceMappingURL=findTypographyStyleByHtmlTag.js.map

package/utils/findTypographyStyleByHtmlTag.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["findTypographyStyleByHtmlTag","htmlTag","themeEmotionMap","styleId","style","tag","undefined","exports"],"sources":["findTypographyStyleByHtmlTag.ts"],"sourcesContent":["import { ThemeEmotionMap } from \"~/types\";\n\nexport const findTypographyStyleByHtmlTag = (htmlTag: string, themeEmotionMap: ThemeEmotionMap) => {\n    for (const styleId in themeEmotionMap) {\n        const style = themeEmotionMap[styleId];\n        if (style.tag === htmlTag) {\n            return style;\n        }\n    }\n    return undefined;\n};\n"],"mappings":";;;;;;AAEO,MAAMA,4BAA4B,GAAGA,CAACC,OAAe,EAAEC,eAAgC,KAAK;EAC/F,KAAK,MAAMC,OAAO,IAAID,eAAe,EAAE;IACnC,MAAME,KAAK,GAAGF,eAAe,CAACC,OAAO,CAAC;IACtC,IAAIC,KAAK,CAACC,GAAG,KAAKJ,OAAO,EAAE;MACvB,OAAOG,KAAK;IAChB;EACJ;EACA,OAAOE,SAAS;AACpB,CAAC;AAACC,OAAA,CAAAP,4BAAA,GAAAA,4BAAA","ignoreList":[]}

package/utils/styleObjectToString.d.ts

@@ -1,2 +0,0 @@
-import type { CSSObject } from "@emotion/react";
-export declare const styleObjectToString: (styleObject: CSSObject) => string;

package/utils/styleObjectToString.js

@@ -1,24 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.styleObjectToString = void 0;
-var _reactStyleObjectToCss = _interopRequireDefault(require("react-style-object-to-css"));
-// @ts-expect-error - There are no types "@types/react-style-object-to-css" for this lib.
-
-/*
- * Converts CSS style objects to string
- * Example:
- *  { fontSize: '10px' } => "font-size: 10px"
- * */
-const styleObjectToString = styleObject => {
-  if (!styleObject) {
-    return styleObject;
-  }
-  return (0, _reactStyleObjectToCss.default)(styleObject);
-};
-exports.styleObjectToString = styleObjectToString;
-
-//# sourceMappingURL=styleObjectToString.js.map

package/utils/styleObjectToString.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["_reactStyleObjectToCss","_interopRequireDefault","require","styleObjectToString","styleObject","reactToCSS","exports"],"sources":["styleObjectToString.ts"],"sourcesContent":["// @ts-expect-error - There are no types \"@types/react-style-object-to-css\" for this lib.\nimport reactToCSS from \"react-style-object-to-css\";\nimport type { CSSObject } from \"@emotion/react\";\n\n/*\n * Converts CSS style objects to string\n * Example:\n *  { fontSize: '10px' } => \"font-size: 10px\"\n * */\nexport const styleObjectToString = (styleObject: CSSObject): string => {\n    if (!styleObject) {\n        return styleObject;\n    }\n    return reactToCSS(styleObject);\n};\n"],"mappings":";;;;;;;AACA,IAAAA,sBAAA,GAAAC,sBAAA,CAAAC,OAAA;AADA;;AAIA;AACA;AACA;AACA;AACA;AACO,MAAMC,mBAAmB,GAAIC,WAAsB,IAAa;EACnE,IAAI,CAACA,WAAW,EAAE;IACd,OAAOA,WAAW;EACtB;EACA,OAAO,IAAAC,8BAAU,EAACD,WAAW,CAAC;AAClC,CAAC;AAACE,OAAA,CAAAH,mBAAA,GAAAA,mBAAA","ignoreList":[]}

package/utils/toTypographyEmotionMap.d.ts

@@ -1,4 +0,0 @@
-import { ThemeEmotionMap } from "../types";
-import { WebinyTheme } from "../createTheme";
-import { css as EmotionCSS } from "emotion";
-export declare const toTypographyEmotionMap: (css: typeof EmotionCSS, theme: WebinyTheme, themeStylesTransformer?: any) => ThemeEmotionMap;

package/utils/toTypographyEmotionMap.js

@@ -1,41 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.toTypographyEmotionMap = void 0;
-/*
- *  Creates a map of style key ID's and typography style objects that include 'className' property which contains the
- *  CSS class name generated by the Emotion from typography styles object.
- */
-const toTypographyEmotionMap = (css, theme, themeStylesTransformer) => {
-  const map = {};
-  const typographyStyles = theme.styles?.typography;
-  if (!typographyStyles) {
-    return {};
-  }
-  for (const key in typographyStyles) {
-    const typographyTypeData = typographyStyles[key];
-    if (typographyTypeData) {
-      typographyTypeData.forEach(styleItem => {
-        // 'lx' (abbreviation of lexical) variable will lead to generate shorter class names.
-        // for example: instead of default 'css-181qz4b-453f345f'
-        // the last segment will always end with 'lx' or 'css-181qz4b-lx'
-
-        let transformedStyles = styleItem.styles;
-        if (themeStylesTransformer) {
-          transformedStyles = themeStylesTransformer(styleItem.styles);
-        }
-        const lx = {
-          ...styleItem,
-          className: [css(transformedStyles)].filter(Boolean).join(" ")
-        };
-        map[styleItem.id] = lx;
-      });
-    }
-  }
-  return map;
-};
-exports.toTypographyEmotionMap = toTypographyEmotionMap;
-
-//# sourceMappingURL=toTypographyEmotionMap.js.map

package/utils/toTypographyEmotionMap.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["toTypographyEmotionMap","css","theme","themeStylesTransformer","map","typographyStyles","styles","typography","key","typographyTypeData","forEach","styleItem","transformedStyles","lx","className","filter","Boolean","join","id","exports"],"sources":["toTypographyEmotionMap.ts"],"sourcesContent":["import { ThemeEmotionMap, TypographyHTMLTag } from \"~/types\";\nimport { WebinyTheme } from \"~/createTheme\";\nimport { css as EmotionCSS } from \"emotion\";\n\n/*\n *  Creates a map of style key ID's and typography style objects that include 'className' property which contains the\n *  CSS class name generated by the Emotion from typography styles object.\n */\nexport const toTypographyEmotionMap = (\n    css: typeof EmotionCSS,\n    theme: WebinyTheme,\n    themeStylesTransformer?: any\n): ThemeEmotionMap => {\n    const map: ThemeEmotionMap = {};\n    const typographyStyles = theme.styles?.typography;\n    if (!typographyStyles) {\n        return {};\n    }\n\n    for (const key in typographyStyles) {\n        const typographyTypeData = typographyStyles[key] as {\n            id: string;\n            tag: TypographyHTMLTag;\n            name: string;\n            styles: Record<string, any>;\n        }[];\n        if (typographyTypeData) {\n            typographyTypeData.forEach(styleItem => {\n                // 'lx' (abbreviation of lexical) variable will lead to generate shorter class names.\n                // for example: instead of default 'css-181qz4b-453f345f'\n                // the last segment will always end with 'lx' or 'css-181qz4b-lx'\n\n                let transformedStyles = styleItem.styles;\n                if (themeStylesTransformer) {\n                    transformedStyles = themeStylesTransformer(styleItem.styles);\n                }\n\n                const lx = {\n                    ...styleItem,\n                    className: [css(transformedStyles)].filter(Boolean).join(\" \")\n                };\n                map[styleItem.id] = lx;\n            });\n        }\n    }\n\n    return map;\n};\n"],"mappings":";;;;;;AAIA;AACA;AACA;AACA;AACO,MAAMA,sBAAsB,GAAGA,CAClCC,GAAsB,EACtBC,KAAkB,EAClBC,sBAA4B,KACV;EAClB,MAAMC,GAAoB,GAAG,CAAC,CAAC;EAC/B,MAAMC,gBAAgB,GAAGH,KAAK,CAACI,MAAM,EAAEC,UAAU;EACjD,IAAI,CAACF,gBAAgB,EAAE;IACnB,OAAO,CAAC,CAAC;EACb;EAEA,KAAK,MAAMG,GAAG,IAAIH,gBAAgB,EAAE;IAChC,MAAMI,kBAAkB,GAAGJ,gBAAgB,CAACG,GAAG,CAK5C;IACH,IAAIC,kBAAkB,EAAE;MACpBA,kBAAkB,CAACC,OAAO,CAACC,SAAS,IAAI;QACpC;QACA;QACA;;QAEA,IAAIC,iBAAiB,GAAGD,SAAS,CAACL,MAAM;QACxC,IAAIH,sBAAsB,EAAE;UACxBS,iBAAiB,GAAGT,sBAAsB,CAACQ,SAAS,CAACL,MAAM,CAAC;QAChE;QAEA,MAAMO,EAAE,GAAG;UACP,GAAGF,SAAS;UACZG,SAAS,EAAE,CAACb,GAAG,CAACW,iBAAiB,CAAC,CAAC,CAACG,MAAM,CAACC,OAAO,CAAC,CAACC,IAAI,CAAC,GAAG;QAChE,CAAC;QACDb,GAAG,CAACO,SAAS,CAACO,EAAE,CAAC,GAAGL,EAAE;MAC1B,CAAC,CAAC;IACN;EACJ;EAEA,OAAOT,GAAG;AACd,CAAC;AAACe,OAAA,CAAAnB,sBAAA,GAAAA,sBAAA","ignoreList":[]}