@byline/richtext-lexical 3.3.0 → 3.4.0
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/dist/field/config/default.js +1 -0
- package/dist/field/config/types.d.ts +1 -1
- package/dist/field/context/markdown-mode-context.d.ts +32 -0
- package/dist/field/context/markdown-mode-context.js +25 -0
- package/dist/field/editor-component.css +2 -0
- package/dist/field/editor-context.js +19 -16
- package/dist/field/editor.css +19 -0
- package/dist/field/editor.js +5 -2
- package/dist/field/hooks/use-markdown-toggle.d.ts +19 -0
- package/dist/field/hooks/use-markdown-toggle.js +102 -0
- package/dist/field/markdown/transformers.d.ts +30 -0
- package/dist/field/markdown/transformers.js +151 -0
- package/dist/field/plugins/toolbar-plugin/index.js +21 -1
- package/dist/field/themes/lexical-editor-theme.css +10 -2
- package/dist/richtext-field_module.css +2 -0
- package/package.json +5 -5
- package/src/field/config/default.ts +1 -0
- package/src/field/config/types.ts +1 -0
- package/src/field/context/markdown-mode-context.tsx +56 -0
- package/src/field/editor-component.css +6 -0
- package/src/field/editor-context.tsx +15 -12
- package/src/field/editor.css +27 -0
- package/src/field/editor.tsx +9 -2
- package/src/field/hooks/use-markdown-toggle.ts +142 -0
- package/src/field/markdown/transformers.ts +275 -0
- package/src/field/plugins/toolbar-plugin/index.tsx +20 -1
- package/src/field/themes/lexical-editor-theme.css +23 -4
- package/src/richtext-field.module.css +7 -0
|
@@ -140,26 +140,45 @@ html[data-theme="dark"] .LexicalEditorTheme__textCode,
|
|
|
140
140
|
background-color: rgb(240, 242, 245);
|
|
141
141
|
font-family: Menlo, Consolas, Monaco, monospace;
|
|
142
142
|
display: block;
|
|
143
|
-
padding:
|
|
143
|
+
/* No left padding: the sticky gutter must sit flush at the block's left
|
|
144
|
+
* edge. Any left padding offsets the gutter rightward and leaves a strip
|
|
145
|
+
* to its left where scrolled code text peeks through. The gutter's own
|
|
146
|
+
* padding + margin-right provides the spacing before the code. */
|
|
147
|
+
padding: 8px 8px 8px 0;
|
|
144
148
|
line-height: 1.53;
|
|
145
149
|
font-size: 15px;
|
|
146
150
|
margin: 0;
|
|
147
151
|
margin-top: 8px;
|
|
148
152
|
margin-bottom: 8px;
|
|
149
153
|
tab-size: 2;
|
|
150
|
-
/*
|
|
154
|
+
/* Code lines must NOT wrap. The data-gutter line numbers track logical
|
|
155
|
+
* (newline-separated) lines; if lines wrap, the visual line count exceeds
|
|
156
|
+
* the gutter and the numbers no longer line up. Overflow scrolls within
|
|
157
|
+
* the block instead. max-width/box-sizing keep the scroll inside the code
|
|
158
|
+
* element rather than blowing out the editor width. */
|
|
159
|
+
white-space: pre;
|
|
151
160
|
overflow-x: auto;
|
|
152
161
|
position: relative;
|
|
162
|
+
max-width: 100%;
|
|
163
|
+
box-sizing: border-box;
|
|
153
164
|
}
|
|
154
165
|
|
|
155
166
|
.LexicalEditorTheme__code:before {
|
|
156
167
|
content: attr(data-gutter);
|
|
157
|
-
|
|
158
|
-
|
|
168
|
+
/* sticky + float keeps the gutter pinned to the left edge while the code
|
|
169
|
+
* scrolls horizontally (previously position: absolute, which scrolled out
|
|
170
|
+
* of view with the content, leaving the line numbers behind). */
|
|
171
|
+
position: sticky;
|
|
172
|
+
float: left;
|
|
159
173
|
left: 0;
|
|
160
174
|
top: 0;
|
|
175
|
+
z-index: 3;
|
|
176
|
+
min-height: 100%;
|
|
177
|
+
background-color: #eee;
|
|
161
178
|
border-right: 1px solid #ccc;
|
|
162
179
|
padding: 8px;
|
|
180
|
+
margin-right: 10px;
|
|
181
|
+
margin-top: -8px;
|
|
163
182
|
color: #777;
|
|
164
183
|
white-space: pre-wrap;
|
|
165
184
|
text-align: right;
|
|
@@ -12,6 +12,10 @@
|
|
|
12
12
|
display: flex;
|
|
13
13
|
flex: 1 1 0%;
|
|
14
14
|
height: 100%;
|
|
15
|
+
/* Allow shrinking below content min-content so a wide (white-space:pre)
|
|
16
|
+
* code block inside the editor scrolls internally instead of stretching
|
|
17
|
+
* this field — and the form column — across the sidebar. */
|
|
18
|
+
min-width: 0;
|
|
15
19
|
}
|
|
16
20
|
|
|
17
21
|
.label-row,
|
|
@@ -26,4 +30,7 @@
|
|
|
26
30
|
flex: 1 1 0%;
|
|
27
31
|
flex-direction: column;
|
|
28
32
|
gap: 0.25rem;
|
|
33
|
+
/* Same rationale as .wrapper — keep the editor body from growing to the
|
|
34
|
+
* code block's intrinsic width. */
|
|
35
|
+
min-width: 0;
|
|
29
36
|
}
|