@webiny/lexical-theme 6.4.0-beta.3 → 6.4.0-beta.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/Theme.d.ts +12 -5
- package/Theme.js +22 -8
- package/Theme.js.map +1 -1
- package/createTheme.d.ts +2 -1
- package/createTheme.js +2 -1
- package/createTheme.js.map +1 -1
- package/package.json +6 -5
- package/types.d.ts +2 -0
package/Theme.d.ts
CHANGED
|
@@ -1,17 +1,24 @@
|
|
|
1
1
|
import type { EditorThemeClasses } from "lexical";
|
|
2
|
-
import type { ColorValue, EditorTheme, TypographyValue } from "./types.js";
|
|
2
|
+
import type { ColorValue, FontSizes, EditorTheme, TypographyValue } from "./types.js";
|
|
3
3
|
export declare class Theme {
|
|
4
4
|
static cache: Record<string, Theme>;
|
|
5
5
|
static lastUsedTheme: Theme | null;
|
|
6
6
|
readonly tokens: EditorThemeClasses;
|
|
7
|
-
private _colors;
|
|
8
|
-
private
|
|
9
|
-
private
|
|
10
|
-
|
|
7
|
+
private readonly _colors;
|
|
8
|
+
private readonly _fontSizes;
|
|
9
|
+
private readonly _typography;
|
|
10
|
+
private readonly _typographyMap;
|
|
11
|
+
constructor(params: {
|
|
12
|
+
colors: EditorTheme["colors"];
|
|
13
|
+
typography: EditorTheme["typography"];
|
|
14
|
+
fontSizes: EditorTheme["fontSizes"];
|
|
15
|
+
tokens: EditorThemeClasses;
|
|
16
|
+
});
|
|
11
17
|
static empty(): Theme;
|
|
12
18
|
static from(lexicalTheme: EditorThemeClasses): Theme;
|
|
13
19
|
get colors(): ColorValue[];
|
|
14
20
|
get typography(): Record<string, TypographyValue[]>;
|
|
21
|
+
get fontSizes(): FontSizes;
|
|
15
22
|
getTypographyById(id: string): TypographyValue;
|
|
16
23
|
getTypographyByTag(tag: string | string[]): TypographyValue | undefined;
|
|
17
24
|
private toTypographyMap;
|
package/Theme.js
CHANGED
|
@@ -5,19 +5,30 @@ class Theme {
|
|
|
5
5
|
static{
|
|
6
6
|
this.lastUsedTheme = null;
|
|
7
7
|
}
|
|
8
|
-
constructor(
|
|
9
|
-
this._colors = colors;
|
|
10
|
-
this._typography = typography;
|
|
11
|
-
this.
|
|
12
|
-
this.
|
|
8
|
+
constructor(params){
|
|
9
|
+
this._colors = params.colors;
|
|
10
|
+
this._typography = params.typography;
|
|
11
|
+
this._fontSizes = params.fontSizes;
|
|
12
|
+
this._typographyMap = this.toTypographyMap(params.typography);
|
|
13
|
+
this.tokens = params.tokens;
|
|
13
14
|
}
|
|
14
15
|
static empty() {
|
|
15
|
-
return new Theme(
|
|
16
|
+
return new Theme({
|
|
17
|
+
colors: [],
|
|
18
|
+
typography: {},
|
|
19
|
+
fontSizes: [],
|
|
20
|
+
tokens: {}
|
|
21
|
+
});
|
|
16
22
|
}
|
|
17
23
|
static from(lexicalTheme) {
|
|
18
|
-
const { $colors, $typography, $cacheKey, ...tokens } = lexicalTheme;
|
|
24
|
+
const { $colors, $typography, $fontSizes, $cacheKey, ...tokens } = lexicalTheme;
|
|
19
25
|
if (!$colors) return Theme.lastUsedTheme ?? Theme.empty();
|
|
20
|
-
if (!Theme.cache[$cacheKey]) Theme.cache[$cacheKey] = new Theme(
|
|
26
|
+
if (!Theme.cache[$cacheKey]) Theme.cache[$cacheKey] = new Theme({
|
|
27
|
+
colors: $colors,
|
|
28
|
+
typography: $typography,
|
|
29
|
+
fontSizes: $fontSizes,
|
|
30
|
+
tokens
|
|
31
|
+
});
|
|
21
32
|
Theme.lastUsedTheme = Theme.cache[$cacheKey];
|
|
22
33
|
return Theme.cache[$cacheKey];
|
|
23
34
|
}
|
|
@@ -27,6 +38,9 @@ class Theme {
|
|
|
27
38
|
get typography() {
|
|
28
39
|
return this._typography;
|
|
29
40
|
}
|
|
41
|
+
get fontSizes() {
|
|
42
|
+
return this._fontSizes;
|
|
43
|
+
}
|
|
30
44
|
getTypographyById(id) {
|
|
31
45
|
return this._typographyMap[id];
|
|
32
46
|
}
|
package/Theme.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Theme.js","sources":["../src/Theme.ts"],"sourcesContent":["import type { EditorThemeClasses } from \"lexical\";\nimport type {
|
|
1
|
+
{"version":3,"file":"Theme.js","sources":["../src/Theme.ts"],"sourcesContent":["import type { EditorThemeClasses } from \"lexical\";\nimport type {\n ColorValue,\n FontSizes,\n EditorTheme,\n TypographyMap,\n TypographyValue\n} from \"~/types.js\";\n\ntype InternalProps = {\n $colors: EditorTheme[\"colors\"];\n $fontSizes: EditorTheme[\"fontSizes\"];\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 readonly _colors: ColorValue[];\n private readonly _fontSizes: FontSizes;\n private readonly _typography: Record<string, TypographyValue[]>;\n private readonly _typographyMap: TypographyMap;\n\n constructor(params: {\n colors: EditorTheme[\"colors\"];\n typography: EditorTheme[\"typography\"];\n fontSizes: EditorTheme[\"fontSizes\"];\n tokens: EditorThemeClasses;\n }) {\n this._colors = params.colors;\n this._typography = params.typography;\n this._fontSizes = params.fontSizes;\n this._typographyMap = this.toTypographyMap(params.typography);\n this.tokens = params.tokens;\n }\n\n static empty() {\n return new Theme({ colors: [], typography: {}, fontSizes: [], tokens: {} });\n }\n\n static from(lexicalTheme: EditorThemeClasses) {\n const { $colors, $typography, $fontSizes, $cacheKey, ...tokens } =\n 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({\n colors: $colors,\n typography: $typography,\n fontSizes: $fontSizes,\n tokens\n });\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 get fontSizes() {\n return this._fontSizes;\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 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"],"names":["Theme","params","lexicalTheme","$colors","$typography","$fontSizes","$cacheKey","tokens","id","tag","tags","Array","styleId","style","typography","Object","acc","key","items","item"],"mappings":"AAkBO,MAAMA;;aACF,KAAK,GAA0B,CAAC;;;aAChC,aAAa,GAAiB;;IAOrC,YAAYC,MAKX,CAAE;QACC,IAAI,CAAC,OAAO,GAAGA,OAAO,MAAM;QAC5B,IAAI,CAAC,WAAW,GAAGA,OAAO,UAAU;QACpC,IAAI,CAAC,UAAU,GAAGA,OAAO,SAAS;QAClC,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC,eAAe,CAACA,OAAO,UAAU;QAC5D,IAAI,CAAC,MAAM,GAAGA,OAAO,MAAM;IAC/B;IAEA,OAAO,QAAQ;QACX,OAAO,IAAID,MAAM;YAAE,QAAQ,EAAE;YAAE,YAAY,CAAC;YAAG,WAAW,EAAE;YAAE,QAAQ,CAAC;QAAE;IAC7E;IAEA,OAAO,KAAKE,YAAgC,EAAE;QAC1C,MAAM,EAAEC,OAAO,EAAEC,WAAW,EAAEC,UAAU,EAAEC,SAAS,EAAE,GAAGC,QAAQ,GAC5DL;QAEJ,IAAI,CAACC,SACD,OAAOH,MAAM,aAAa,IAAIA,MAAM,KAAK;QAG7C,IAAI,CAACA,MAAM,KAAK,CAACM,UAAU,EACvBN,MAAM,KAAK,CAACM,UAAU,GAAG,IAAIN,MAAM;YAC/B,QAAQG;YACR,YAAYC;YACZ,WAAWC;YACXE;QACJ;QAGJP,MAAM,aAAa,GAAGA,MAAM,KAAK,CAACM,UAAU;QAE5C,OAAON,MAAM,KAAK,CAACM,UAAU;IACjC;IAEA,IAAI,SAAS;QACT,OAAO,IAAI,CAAC,OAAO;IACvB;IAEA,IAAI,aAAa;QACb,OAAO,IAAI,CAAC,WAAW;IAC3B;IAEA,IAAI,YAAY;QACZ,OAAO,IAAI,CAAC,UAAU;IAC1B;IAEA,kBAAkBE,EAAU,EAAE;QAC1B,OAAO,IAAI,CAAC,cAAc,CAACA,GAAG;IAClC;IAEA,mBAAmBC,GAAsB,EAAE;QACvC,MAAMC,OAAOC,MAAM,OAAO,CAACF,OAAOA,MAAM;YAACA;SAAI;QAE7C,IAAK,MAAMG,WAAW,IAAI,CAAC,cAAc,CAAE;YACvC,MAAMC,QAAQ,IAAI,CAAC,cAAc,CAACD,QAAQ;YAC1C,IAAIF,KAAK,QAAQ,CAACG,MAAM,GAAG,GACvB,OAAOA;QAEf;IAEJ;IAKQ,gBAAgBC,UAAqC,EAAiB;QAC1E,OAAOC,OAAO,IAAI,CAACD,YAAY,MAAM,CAAC,CAACE,KAAKC;YACxC,MAAMC,QAAQJ,UAAU,CAACG,IAAI;YAC7B,KAAK,MAAME,QAAQD,MACfF,GAAG,CAACG,KAAK,EAAE,CAAC,GAAGA;YAEnB,OAAOH;QACX,GAAG,CAAC;IACR;AACJ"}
|
package/createTheme.d.ts
CHANGED
|
@@ -1,7 +1,8 @@
|
|
|
1
|
-
import type { ColorValue, EditorTheme, TypographyValue } from "./types.js";
|
|
1
|
+
import type { ColorValue, EditorTheme, TypographyValue, FontSizes } from "./types.js";
|
|
2
2
|
export interface CreateThemeParams {
|
|
3
3
|
colors: ColorValue[];
|
|
4
4
|
typography: Record<string, TypographyValue[]>;
|
|
5
5
|
lexicalTokenPrefix: string;
|
|
6
|
+
fontSizes: FontSizes | null;
|
|
6
7
|
}
|
|
7
8
|
export declare const createTheme: (params: CreateThemeParams) => EditorTheme;
|
package/createTheme.js
CHANGED
|
@@ -2,7 +2,8 @@ import { createLexicalTokens } from "./createLexicalEditorTokens.js";
|
|
|
2
2
|
const createTheme = (params)=>({
|
|
3
3
|
colors: params.colors,
|
|
4
4
|
typography: params.typography,
|
|
5
|
-
tokens: createLexicalTokens(params.lexicalTokenPrefix)
|
|
5
|
+
tokens: createLexicalTokens(params.lexicalTokenPrefix),
|
|
6
|
+
fontSizes: params.fontSizes ?? []
|
|
6
7
|
});
|
|
7
8
|
export { createTheme };
|
|
8
9
|
|
package/createTheme.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"createTheme.js","sources":["../src/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"],"names":["createTheme","params","createLexicalTokens"],"mappings":";
|
|
1
|
+
{"version":3,"file":"createTheme.js","sources":["../src/createTheme.ts"],"sourcesContent":["import type { ColorValue, EditorTheme, TypographyValue, FontSizes } from \"~/types.js\";\nimport { createLexicalTokens } from \"~/createLexicalEditorTokens.js\";\n\nexport interface CreateThemeParams {\n colors: ColorValue[];\n typography: Record<string, TypographyValue[]>;\n lexicalTokenPrefix: string;\n fontSizes: FontSizes | null;\n}\n\nexport const createTheme = (params: CreateThemeParams): EditorTheme => {\n return {\n colors: params.colors,\n typography: params.typography,\n tokens: createLexicalTokens(params.lexicalTokenPrefix),\n fontSizes: params.fontSizes ?? []\n };\n};\n"],"names":["createTheme","params","createLexicalTokens"],"mappings":";AAUO,MAAMA,cAAc,CAACC,SACjB;QACH,QAAQA,OAAO,MAAM;QACrB,YAAYA,OAAO,UAAU;QAC7B,QAAQC,oBAAoBD,OAAO,kBAAkB;QACrD,WAAWA,OAAO,SAAS,IAAI,EAAE;IACrC"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@webiny/lexical-theme",
|
|
3
|
-
"version": "6.4.0-beta.
|
|
3
|
+
"version": "6.4.0-beta.4",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"exports": {
|
|
6
6
|
".": "./index.js",
|
|
@@ -10,11 +10,12 @@
|
|
|
10
10
|
"lexical": "0.44.0"
|
|
11
11
|
},
|
|
12
12
|
"devDependencies": {
|
|
13
|
-
"@webiny/build-tools": "6.4.0-beta.
|
|
13
|
+
"@webiny/build-tools": "6.4.0-beta.4"
|
|
14
14
|
},
|
|
15
15
|
"publishConfig": {
|
|
16
|
-
"access": "public"
|
|
17
|
-
"directory": "dist"
|
|
16
|
+
"access": "public"
|
|
18
17
|
},
|
|
19
|
-
"
|
|
18
|
+
"webiny": {
|
|
19
|
+
"publishFrom": "dist"
|
|
20
|
+
}
|
|
20
21
|
}
|
package/types.d.ts
CHANGED
|
@@ -4,6 +4,7 @@ export type ColorValue = {
|
|
|
4
4
|
label: string;
|
|
5
5
|
value: string;
|
|
6
6
|
};
|
|
7
|
+
export type FontSizes = string[];
|
|
7
8
|
export type TypographyValue = {
|
|
8
9
|
id: string;
|
|
9
10
|
tag: string;
|
|
@@ -14,5 +15,6 @@ export type EditorTheme = {
|
|
|
14
15
|
colors: ColorValue[];
|
|
15
16
|
typography: Record<string, TypographyValue[]>;
|
|
16
17
|
tokens: EditorThemeClasses;
|
|
18
|
+
fontSizes: FontSizes;
|
|
17
19
|
};
|
|
18
20
|
export type TypographyMap = Record<string, TypographyValue>;
|