@webiny/lexical-theme 0.0.0-unstable.ac6ebf63c6 → 0.0.0-unstable.b6d7105cee
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 +15 -5
- package/Theme.js +65 -58
- package/Theme.js.map +1 -1
- package/createLexicalEditorTokens.js +102 -97
- package/createLexicalEditorTokens.js.map +1 -1
- package/createTheme.d.ts +2 -1
- package/createTheme.js +7 -7
- package/createTheme.js.map +1 -1
- package/index.js +0 -2
- package/package.json +11 -6
- package/toTypographyMap.js +8 -11
- package/toTypographyMap.js.map +1 -1
- package/types.d.ts +3 -0
- package/types.js +0 -3
- package/index.js.map +0 -1
- package/types.js.map +0 -1
package/Theme.d.ts
CHANGED
|
@@ -1,17 +1,27 @@
|
|
|
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
|
+
private readonly _allowCustomColors;
|
|
12
|
+
constructor(params: {
|
|
13
|
+
colors: EditorTheme["colors"];
|
|
14
|
+
typography: EditorTheme["typography"];
|
|
15
|
+
fontSizes: EditorTheme["fontSizes"];
|
|
16
|
+
tokens: EditorThemeClasses;
|
|
17
|
+
allowCustomColors?: boolean;
|
|
18
|
+
});
|
|
11
19
|
static empty(): Theme;
|
|
12
20
|
static from(lexicalTheme: EditorThemeClasses): Theme;
|
|
13
21
|
get colors(): ColorValue[];
|
|
14
22
|
get typography(): Record<string, TypographyValue[]>;
|
|
23
|
+
get fontSizes(): FontSizes;
|
|
24
|
+
get allowCustomColors(): boolean;
|
|
15
25
|
getTypographyById(id: string): TypographyValue;
|
|
16
26
|
getTypographyByTag(tag: string | string[]): TypographyValue | undefined;
|
|
17
27
|
private toTypographyMap;
|
package/Theme.js
CHANGED
|
@@ -1,64 +1,71 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
constructor(colors, typography, tokens) {
|
|
5
|
-
this._colors = colors;
|
|
6
|
-
this._typography = typography;
|
|
7
|
-
this._typographyMap = this.toTypographyMap(typography);
|
|
8
|
-
this.tokens = tokens;
|
|
9
|
-
}
|
|
10
|
-
static empty() {
|
|
11
|
-
return new Theme([], {}, {});
|
|
12
|
-
}
|
|
13
|
-
static from(lexicalTheme) {
|
|
14
|
-
const {
|
|
15
|
-
$colors,
|
|
16
|
-
$typography,
|
|
17
|
-
$cacheKey,
|
|
18
|
-
...tokens
|
|
19
|
-
} = lexicalTheme;
|
|
20
|
-
if (!$colors) {
|
|
21
|
-
return Theme.lastUsedTheme ?? Theme.empty();
|
|
1
|
+
class Theme {
|
|
2
|
+
static{
|
|
3
|
+
this.cache = {};
|
|
22
4
|
}
|
|
23
|
-
|
|
24
|
-
|
|
5
|
+
static{
|
|
6
|
+
this.lastUsedTheme = null;
|
|
25
7
|
}
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
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;
|
|
14
|
+
this._allowCustomColors = params.allowCustomColors ?? false;
|
|
15
|
+
}
|
|
16
|
+
static empty() {
|
|
17
|
+
return new Theme({
|
|
18
|
+
colors: [],
|
|
19
|
+
typography: {},
|
|
20
|
+
fontSizes: [],
|
|
21
|
+
tokens: {},
|
|
22
|
+
allowCustomColors: false
|
|
23
|
+
});
|
|
24
|
+
}
|
|
25
|
+
static from(lexicalTheme) {
|
|
26
|
+
const { $colors, $typography, $fontSizes, $cacheKey, ...tokens } = lexicalTheme;
|
|
27
|
+
if (!$colors) return Theme.lastUsedTheme ?? Theme.empty();
|
|
28
|
+
if (!Theme.cache[$cacheKey]) Theme.cache[$cacheKey] = new Theme({
|
|
29
|
+
colors: $colors,
|
|
30
|
+
typography: $typography,
|
|
31
|
+
fontSizes: $fontSizes,
|
|
32
|
+
tokens
|
|
33
|
+
});
|
|
34
|
+
Theme.lastUsedTheme = Theme.cache[$cacheKey];
|
|
35
|
+
return Theme.cache[$cacheKey];
|
|
36
|
+
}
|
|
37
|
+
get colors() {
|
|
38
|
+
return this._colors;
|
|
39
|
+
}
|
|
40
|
+
get typography() {
|
|
41
|
+
return this._typography;
|
|
42
|
+
}
|
|
43
|
+
get fontSizes() {
|
|
44
|
+
return this._fontSizes;
|
|
45
|
+
}
|
|
46
|
+
get allowCustomColors() {
|
|
47
|
+
return this._allowCustomColors;
|
|
48
|
+
}
|
|
49
|
+
getTypographyById(id) {
|
|
50
|
+
return this._typographyMap[id];
|
|
51
|
+
}
|
|
52
|
+
getTypographyByTag(tag) {
|
|
53
|
+
const tags = Array.isArray(tag) ? tag : [
|
|
54
|
+
tag
|
|
55
|
+
];
|
|
56
|
+
for(const styleId in this._typographyMap){
|
|
57
|
+
const style = this._typographyMap[styleId];
|
|
58
|
+
if (tags.includes(style.tag)) return style;
|
|
59
|
+
}
|
|
60
|
+
}
|
|
61
|
+
toTypographyMap(typography) {
|
|
62
|
+
return Object.keys(typography).reduce((acc, key)=>{
|
|
63
|
+
const items = typography[key];
|
|
64
|
+
for (const item of items)acc[item.id] = item;
|
|
65
|
+
return acc;
|
|
66
|
+
}, {});
|
|
45
67
|
}
|
|
46
|
-
return undefined;
|
|
47
|
-
}
|
|
48
|
-
|
|
49
|
-
/*
|
|
50
|
-
* Creates a map of style key ID's and typography style objects
|
|
51
|
-
*/
|
|
52
|
-
|
|
53
|
-
toTypographyMap(typography) {
|
|
54
|
-
return Object.keys(typography).reduce((acc, key) => {
|
|
55
|
-
const items = typography[key];
|
|
56
|
-
for (const item of items) {
|
|
57
|
-
acc[item.id] = item;
|
|
58
|
-
}
|
|
59
|
-
return acc;
|
|
60
|
-
}, {});
|
|
61
|
-
}
|
|
62
68
|
}
|
|
69
|
+
export { Theme };
|
|
63
70
|
|
|
64
71
|
//# sourceMappingURL=Theme.js.map
|
package/Theme.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
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 private readonly _allowCustomColors: boolean;\n\n constructor(params: {\n colors: EditorTheme[\"colors\"];\n typography: EditorTheme[\"typography\"];\n fontSizes: EditorTheme[\"fontSizes\"];\n tokens: EditorThemeClasses;\n allowCustomColors?: boolean;\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 this._allowCustomColors = params.allowCustomColors ?? false;\n }\n\n static empty() {\n return new Theme({\n colors: [],\n typography: {},\n fontSizes: [],\n tokens: {},\n allowCustomColors: false\n });\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 get allowCustomColors() {\n return this._allowCustomColors;\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;;IAQrC,YAAYC,MAMX,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;QAC3B,IAAI,CAAC,kBAAkB,GAAGA,OAAO,iBAAiB,IAAI;IAC1D;IAEA,OAAO,QAAQ;QACX,OAAO,IAAID,MAAM;YACb,QAAQ,EAAE;YACV,YAAY,CAAC;YACb,WAAW,EAAE;YACb,QAAQ,CAAC;YACT,mBAAmB;QACvB;IACJ;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,IAAI,oBAAoB;QACpB,OAAO,IAAI,CAAC,kBAAkB;IAClC;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"}
|
|
@@ -1,100 +1,105 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
return
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
1
|
+
const createLexicalTokens = (classPrefix)=>{
|
|
2
|
+
const withPrefix = (className)=>`${classPrefix}${className}`;
|
|
3
|
+
return {
|
|
4
|
+
characterLimit: withPrefix("characterLimit"),
|
|
5
|
+
code: withPrefix("code"),
|
|
6
|
+
codeHighlight: {
|
|
7
|
+
atrule: withPrefix("tokenAttr"),
|
|
8
|
+
attr: withPrefix("tokenAttr"),
|
|
9
|
+
boolean: withPrefix("tokenProperty"),
|
|
10
|
+
builtin: withPrefix("tokenSelector"),
|
|
11
|
+
cdata: withPrefix("tokenComment"),
|
|
12
|
+
char: withPrefix("tokenSelector"),
|
|
13
|
+
class: withPrefix("tokenFunction"),
|
|
14
|
+
"class-name": withPrefix("tokenFunction"),
|
|
15
|
+
comment: withPrefix("tokenComment"),
|
|
16
|
+
constant: withPrefix("tokenProperty"),
|
|
17
|
+
deleted: withPrefix("tokenProperty"),
|
|
18
|
+
doctype: withPrefix("tokenComment"),
|
|
19
|
+
entity: withPrefix("tokenOperator"),
|
|
20
|
+
function: withPrefix("tokenFunction"),
|
|
21
|
+
important: withPrefix("tokenVariable"),
|
|
22
|
+
inserted: withPrefix("tokenSelector"),
|
|
23
|
+
keyword: withPrefix("tokenAttr"),
|
|
24
|
+
namespace: withPrefix("tokenVariable"),
|
|
25
|
+
number: withPrefix("tokenProperty"),
|
|
26
|
+
operator: withPrefix("tokenOperator"),
|
|
27
|
+
prolog: withPrefix("tokenComment"),
|
|
28
|
+
property: withPrefix("tokenProperty"),
|
|
29
|
+
punctuation: withPrefix("tokenPunctuation"),
|
|
30
|
+
regex: withPrefix("tokenVariable"),
|
|
31
|
+
selector: withPrefix("tokenSelector"),
|
|
32
|
+
string: withPrefix("tokenSelector"),
|
|
33
|
+
symbol: withPrefix("tokenProperty"),
|
|
34
|
+
tag: withPrefix("tokenProperty"),
|
|
35
|
+
url: withPrefix("tokenOperator"),
|
|
36
|
+
variable: withPrefix("tokenVariable")
|
|
37
|
+
},
|
|
38
|
+
embedBlock: {
|
|
39
|
+
base: withPrefix("embedBlock"),
|
|
40
|
+
focus: withPrefix("embedBlockFocus")
|
|
41
|
+
},
|
|
42
|
+
hashtag: withPrefix("hashtag"),
|
|
43
|
+
heading: {
|
|
44
|
+
h1: withPrefix("h1"),
|
|
45
|
+
h2: withPrefix("h2"),
|
|
46
|
+
h3: withPrefix("h3"),
|
|
47
|
+
h4: withPrefix("h4"),
|
|
48
|
+
h5: withPrefix("h5"),
|
|
49
|
+
h6: withPrefix("h6")
|
|
50
|
+
},
|
|
51
|
+
link: withPrefix("link"),
|
|
52
|
+
list: {
|
|
53
|
+
listitem: withPrefix("listItem"),
|
|
54
|
+
listitemChecked: withPrefix("listItemChecked"),
|
|
55
|
+
listitemUnchecked: withPrefix("listItemUnchecked"),
|
|
56
|
+
nested: {
|
|
57
|
+
listitem: withPrefix("nestedListItem")
|
|
58
|
+
},
|
|
59
|
+
olDepth: [
|
|
60
|
+
withPrefix("ol1"),
|
|
61
|
+
withPrefix("ol2"),
|
|
62
|
+
withPrefix("ol3"),
|
|
63
|
+
withPrefix("ol4"),
|
|
64
|
+
withPrefix("ol5")
|
|
65
|
+
],
|
|
66
|
+
ul: withPrefix("ul")
|
|
67
|
+
},
|
|
68
|
+
ltr: withPrefix("ltr"),
|
|
69
|
+
mark: withPrefix("mark"),
|
|
70
|
+
markOverlap: withPrefix("markOverlap"),
|
|
71
|
+
paragraph: withPrefix("paragraph"),
|
|
72
|
+
quote: withPrefix("quote"),
|
|
73
|
+
rtl: withPrefix("rtl"),
|
|
74
|
+
text: {
|
|
75
|
+
bold: withPrefix("textBold"),
|
|
76
|
+
code: withPrefix("textCode"),
|
|
77
|
+
italic: withPrefix("textItalic"),
|
|
78
|
+
strikethrough: withPrefix("textStrikethrough"),
|
|
79
|
+
subscript: withPrefix("textSubscript"),
|
|
80
|
+
superscript: withPrefix("textSuperscript"),
|
|
81
|
+
underline: withPrefix("textUnderline"),
|
|
82
|
+
underlineStrikethrough: withPrefix("textUnderlineStrikethrough")
|
|
83
|
+
},
|
|
84
|
+
fontColorText: withPrefix("fontColorText"),
|
|
85
|
+
image: withPrefix("image"),
|
|
86
|
+
indent: withPrefix("indent"),
|
|
87
|
+
inlineImage: withPrefix("inline-image"),
|
|
88
|
+
table: withPrefix("table"),
|
|
89
|
+
tableAddColumns: withPrefix("tableAddColumns"),
|
|
90
|
+
tableAddRows: withPrefix("tableAddRows"),
|
|
91
|
+
tableCellActionButton: withPrefix("tableCellActionButton"),
|
|
92
|
+
tableCellActionButtonContainer: withPrefix("tableCellActionButtonContainer"),
|
|
93
|
+
tableCellSelected: withPrefix("tableCellSelected"),
|
|
94
|
+
tableCell: withPrefix("tableCell"),
|
|
95
|
+
tableCellHeader: withPrefix("tableCellHeader"),
|
|
96
|
+
tableCellResizer: withPrefix("tableCellResizer"),
|
|
97
|
+
tableRow: withPrefix("tableRow"),
|
|
98
|
+
tableScrollableWrapper: withPrefix("tableScrollableWrapper"),
|
|
99
|
+
tableSelected: withPrefix("tableSelected"),
|
|
100
|
+
tableSelection: withPrefix("tableSelection")
|
|
101
|
+
};
|
|
98
102
|
};
|
|
103
|
+
export { createLexicalTokens };
|
|
99
104
|
|
|
100
105
|
//# sourceMappingURL=createLexicalEditorTokens.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"file":"createLexicalEditorTokens.js","sources":["../src/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"],"names":["createLexicalTokens","classPrefix","withPrefix","className"],"mappings":"AAEO,MAAMA,sBAAsB,CAACC;IAChC,MAAMC,aAAa,CAACC,YACT,GAAGF,cAAcE,WAAW;IAGvC,OAAO;QACH,gBAAgBD,WAAW;QAC3B,MAAMA,WAAW;QACjB,eAAe;YACX,QAAQA,WAAW;YACnB,MAAMA,WAAW;YACjB,SAASA,WAAW;YACpB,SAASA,WAAW;YACpB,OAAOA,WAAW;YAClB,MAAMA,WAAW;YACjB,OAAOA,WAAW;YAClB,cAAcA,WAAW;YACzB,SAASA,WAAW;YACpB,UAAUA,WAAW;YACrB,SAASA,WAAW;YACpB,SAASA,WAAW;YACpB,QAAQA,WAAW;YACnB,UAAUA,WAAW;YACrB,WAAWA,WAAW;YACtB,UAAUA,WAAW;YACrB,SAASA,WAAW;YACpB,WAAWA,WAAW;YACtB,QAAQA,WAAW;YACnB,UAAUA,WAAW;YACrB,QAAQA,WAAW;YACnB,UAAUA,WAAW;YACrB,aAAaA,WAAW;YACxB,OAAOA,WAAW;YAClB,UAAUA,WAAW;YACrB,QAAQA,WAAW;YACnB,QAAQA,WAAW;YACnB,KAAKA,WAAW;YAChB,KAAKA,WAAW;YAChB,UAAUA,WAAW;QACzB;QACA,YAAY;YACR,MAAMA,WAAW;YACjB,OAAOA,WAAW;QACtB;QACA,SAASA,WAAW;QACpB,SAAS;YACL,IAAIA,WAAW;YACf,IAAIA,WAAW;YACf,IAAIA,WAAW;YACf,IAAIA,WAAW;YACf,IAAIA,WAAW;YACf,IAAIA,WAAW;QACnB;QACA,MAAMA,WAAW;QACjB,MAAM;YACF,UAAUA,WAAW;YACrB,iBAAiBA,WAAW;YAC5B,mBAAmBA,WAAW;YAC9B,QAAQ;gBACJ,UAAUA,WAAW;YACzB;YACA,SAAS;gBACLA,WAAW;gBACXA,WAAW;gBACXA,WAAW;gBACXA,WAAW;gBACXA,WAAW;aACd;YACD,IAAIA,WAAW;QACnB;QACA,KAAKA,WAAW;QAChB,MAAMA,WAAW;QACjB,aAAaA,WAAW;QACxB,WAAWA,WAAW;QACtB,OAAOA,WAAW;QAClB,KAAKA,WAAW;QAChB,MAAM;YACF,MAAMA,WAAW;YACjB,MAAMA,WAAW;YACjB,QAAQA,WAAW;YACnB,eAAeA,WAAW;YAC1B,WAAWA,WAAW;YACtB,aAAaA,WAAW;YACxB,WAAWA,WAAW;YACtB,wBAAwBA,WAAW;QACvC;QACA,eAAeA,WAAW;QAC1B,OAAOA,WAAW;QAClB,QAAQA,WAAW;QACnB,aAAaA,WAAW;QACxB,OAAOA,WAAW;QAClB,iBAAiBA,WAAW;QAC5B,cAAcA,WAAW;QACzB,uBAAuBA,WAAW;QAClC,gCAAgCA,WAAW;QAC3C,mBAAmBA,WAAW;QAC9B,WAAWA,WAAW;QACtB,iBAAiBA,WAAW;QAC5B,kBAAkBA,WAAW;QAC7B,UAAUA,WAAW;QACrB,wBAAwBA,WAAW;QACnC,eAAeA,WAAW;QAC1B,gBAAgBA,WAAW;IAC/B;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
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
import { createLexicalTokens } from "./createLexicalEditorTokens.js";
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
};
|
|
2
|
+
const createTheme = (params)=>({
|
|
3
|
+
colors: params.colors,
|
|
4
|
+
typography: params.typography,
|
|
5
|
+
tokens: createLexicalTokens(params.lexicalTokenPrefix),
|
|
6
|
+
fontSizes: params.fontSizes ?? []
|
|
7
|
+
});
|
|
8
|
+
export { createTheme };
|
|
9
9
|
|
|
10
10
|
//# sourceMappingURL=createTheme.js.map
|
package/createTheme.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
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/index.js
CHANGED
package/package.json
CHANGED
|
@@ -1,16 +1,21 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@webiny/lexical-theme",
|
|
3
|
-
"version": "0.0.0-unstable.
|
|
3
|
+
"version": "0.0.0-unstable.b6d7105cee",
|
|
4
4
|
"type": "module",
|
|
5
|
+
"exports": {
|
|
6
|
+
".": "./index.js",
|
|
7
|
+
"./*": "./*"
|
|
8
|
+
},
|
|
5
9
|
"dependencies": {
|
|
6
|
-
"lexical": "0.
|
|
10
|
+
"lexical": "0.48.0"
|
|
7
11
|
},
|
|
8
12
|
"devDependencies": {
|
|
9
|
-
"@webiny/build-tools": "0.0.0-unstable.
|
|
13
|
+
"@webiny/build-tools": "0.0.0-unstable.b6d7105cee"
|
|
10
14
|
},
|
|
11
15
|
"publishConfig": {
|
|
12
|
-
"access": "public"
|
|
13
|
-
"directory": "dist"
|
|
16
|
+
"access": "public"
|
|
14
17
|
},
|
|
15
|
-
"
|
|
18
|
+
"webiny": {
|
|
19
|
+
"publishFrom": "dist"
|
|
20
|
+
}
|
|
16
21
|
}
|
package/toTypographyMap.js
CHANGED
|
@@ -1,14 +1,11 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
return {
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
acc[style.id] = style;
|
|
9
|
-
}
|
|
10
|
-
return acc;
|
|
11
|
-
}, {});
|
|
1
|
+
const toTypographyMap = (theme)=>{
|
|
2
|
+
const typographyStyles = theme.typography;
|
|
3
|
+
if (!typographyStyles) return {};
|
|
4
|
+
return Object.keys(typographyStyles).reduce((acc, key)=>{
|
|
5
|
+
for (const style of typographyStyles[key])acc[style.id] = style;
|
|
6
|
+
return acc;
|
|
7
|
+
}, {});
|
|
12
8
|
};
|
|
9
|
+
export { toTypographyMap };
|
|
13
10
|
|
|
14
11
|
//# sourceMappingURL=toTypographyMap.js.map
|
package/toTypographyMap.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"file":"toTypographyMap.js","sources":["../src/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"],"names":["toTypographyMap","theme","typographyStyles","Object","acc","key","style"],"mappings":"AAEO,MAAMA,kBAAkB,CAACC;IAC5B,MAAMC,mBAAmBD,MAAM,UAAU;IACzC,IAAI,CAACC,kBACD,OAAO,CAAC;IAGZ,OAAOC,OAAO,IAAI,CAACD,kBAAkB,MAAM,CAAC,CAACE,KAAKC;QAC9C,KAAK,MAAMC,SAASJ,gBAAgB,CAACG,IAAI,CACrCD,GAAG,CAACE,MAAM,EAAE,CAAC,GAAGA;QAEpB,OAAOF;IACX,GAAG,CAAC;AACR"}
|
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,7 @@ export type EditorTheme = {
|
|
|
14
15
|
colors: ColorValue[];
|
|
15
16
|
typography: Record<string, TypographyValue[]>;
|
|
16
17
|
tokens: EditorThemeClasses;
|
|
18
|
+
fontSizes: FontSizes;
|
|
19
|
+
allowCustomColors?: boolean;
|
|
17
20
|
};
|
|
18
21
|
export type TypographyMap = Record<string, TypographyValue>;
|
package/types.js
CHANGED
package/index.js.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"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/types.js.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"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":[]}
|