@webiny/lexical-theme 0.0.0-unstable.6844005670 → 0.0.0-unstable.7be00a75a9
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 +60 -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 +2 -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,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
|
@@ -1,64 +1,66 @@
|
|
|
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
|
-
return
|
|
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
|
+
}
|
|
15
|
+
static empty() {
|
|
16
|
+
return new Theme({
|
|
17
|
+
colors: [],
|
|
18
|
+
typography: {},
|
|
19
|
+
fontSizes: [],
|
|
20
|
+
tokens: {}
|
|
21
|
+
});
|
|
22
|
+
}
|
|
23
|
+
static from(lexicalTheme) {
|
|
24
|
+
const { $colors, $typography, $fontSizes, $cacheKey, ...tokens } = lexicalTheme;
|
|
25
|
+
if (!$colors) return Theme.lastUsedTheme ?? Theme.empty();
|
|
26
|
+
if (!Theme.cache[$cacheKey]) Theme.cache[$cacheKey] = new Theme({
|
|
27
|
+
colors: $colors,
|
|
28
|
+
typography: $typography,
|
|
29
|
+
fontSizes: $fontSizes,
|
|
30
|
+
tokens
|
|
31
|
+
});
|
|
32
|
+
Theme.lastUsedTheme = Theme.cache[$cacheKey];
|
|
33
|
+
return Theme.cache[$cacheKey];
|
|
34
|
+
}
|
|
35
|
+
get colors() {
|
|
36
|
+
return this._colors;
|
|
37
|
+
}
|
|
38
|
+
get typography() {
|
|
39
|
+
return this._typography;
|
|
40
|
+
}
|
|
41
|
+
get fontSizes() {
|
|
42
|
+
return this._fontSizes;
|
|
43
|
+
}
|
|
44
|
+
getTypographyById(id) {
|
|
45
|
+
return this._typographyMap[id];
|
|
46
|
+
}
|
|
47
|
+
getTypographyByTag(tag) {
|
|
48
|
+
const tags = Array.isArray(tag) ? tag : [
|
|
49
|
+
tag
|
|
50
|
+
];
|
|
51
|
+
for(const styleId in this._typographyMap){
|
|
52
|
+
const style = this._typographyMap[styleId];
|
|
53
|
+
if (tags.includes(style.tag)) return style;
|
|
54
|
+
}
|
|
55
|
+
}
|
|
56
|
+
toTypographyMap(typography) {
|
|
57
|
+
return Object.keys(typography).reduce((acc, key)=>{
|
|
58
|
+
const items = typography[key];
|
|
59
|
+
for (const item of items)acc[item.id] = item;
|
|
60
|
+
return acc;
|
|
61
|
+
}, {});
|
|
45
62
|
}
|
|
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
63
|
}
|
|
64
|
+
export { Theme };
|
|
63
65
|
|
|
64
66
|
//# 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\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"}
|
|
@@ -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.7be00a75a9",
|
|
4
4
|
"type": "module",
|
|
5
|
+
"exports": {
|
|
6
|
+
".": "./index.js",
|
|
7
|
+
"./*": "./*"
|
|
8
|
+
},
|
|
5
9
|
"dependencies": {
|
|
6
|
-
"lexical": "0.
|
|
10
|
+
"lexical": "0.44.0"
|
|
7
11
|
},
|
|
8
12
|
"devDependencies": {
|
|
9
|
-
"@webiny/build-tools": "0.0.0-unstable.
|
|
13
|
+
"@webiny/build-tools": "0.0.0-unstable.7be00a75a9"
|
|
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,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>;
|
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":[]}
|