@mindlogic-ai/logician-ui 3.2.0-alpha.5 → 4.0.0-alpha.10

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.
Files changed (80) hide show
  1. package/dist/components/Loaders/PageLoader.d.ts.map +1 -1
  2. package/dist/components/Loaders/PageLoader.js +2 -2
  3. package/dist/components/Loaders/PageLoader.js.map +1 -1
  4. package/dist/components/Loaders/PageLoader.mjs +2 -2
  5. package/dist/components/Loaders/PageLoader.mjs.map +1 -1
  6. package/dist/components/Loaders/SectionLoader.d.ts.map +1 -1
  7. package/dist/components/Loaders/SectionLoader.js +2 -2
  8. package/dist/components/Loaders/SectionLoader.js.map +1 -1
  9. package/dist/components/Loaders/SectionLoader.mjs +2 -2
  10. package/dist/components/Loaders/SectionLoader.mjs.map +1 -1
  11. package/dist/components/Tag/Tag.d.ts.map +1 -1
  12. package/dist/components/Tag/Tag.js +1 -1
  13. package/dist/components/Tag/Tag.js.map +1 -1
  14. package/dist/components/Tag/Tag.mjs +1 -1
  15. package/dist/components/Tag/Tag.mjs.map +1 -1
  16. package/dist/components/Tag/Tag.styles.d.ts.map +1 -1
  17. package/dist/components/Tag/Tag.styles.js +22 -16
  18. package/dist/components/Tag/Tag.styles.js.map +1 -1
  19. package/dist/components/Tag/Tag.styles.mjs +22 -16
  20. package/dist/components/Tag/Tag.styles.mjs.map +1 -1
  21. package/dist/components/Tree/Tree.d.ts +5 -1
  22. package/dist/components/Tree/Tree.d.ts.map +1 -1
  23. package/dist/components/Tree/Tree.types.d.ts +29 -1
  24. package/dist/components/Tree/Tree.types.d.ts.map +1 -1
  25. package/dist/components/Tree/TreeBranchIndentGuide.d.ts +5 -1
  26. package/dist/components/Tree/TreeBranchIndentGuide.d.ts.map +1 -1
  27. package/dist/components/Tree/TreeBranchIndentGuide.js +107 -8
  28. package/dist/components/Tree/TreeBranchIndentGuide.js.map +1 -1
  29. package/dist/components/Tree/TreeBranchIndentGuide.mjs +107 -8
  30. package/dist/components/Tree/TreeBranchIndentGuide.mjs.map +1 -1
  31. package/dist/components/Typography/Link.d.ts.map +1 -1
  32. package/dist/components/Typography/Link.js +6 -1
  33. package/dist/components/Typography/Link.js.map +1 -1
  34. package/dist/components/Typography/Link.mjs +6 -1
  35. package/dist/components/Typography/Link.mjs.map +1 -1
  36. package/dist/index.d.ts +0 -1
  37. package/dist/index.d.ts.map +1 -1
  38. package/dist/index.js +0 -2
  39. package/dist/index.js.map +1 -1
  40. package/dist/index.mjs +0 -1
  41. package/dist/index.mjs.map +1 -1
  42. package/dist/theme/global.d.ts.map +1 -1
  43. package/dist/theme/global.js +4 -1
  44. package/dist/theme/global.js.map +1 -1
  45. package/dist/theme/global.mjs +4 -1
  46. package/dist/theme/global.mjs.map +1 -1
  47. package/dist/theme/index.d.ts +1 -1
  48. package/dist/theme/index.d.ts.map +1 -1
  49. package/dist/theme/index.js +8 -4
  50. package/dist/theme/index.js.map +1 -1
  51. package/dist/theme/index.mjs +8 -4
  52. package/dist/theme/index.mjs.map +1 -1
  53. package/package.json +1 -3
  54. package/src/components/Loaders/PageLoader.tsx +3 -5
  55. package/src/components/Loaders/SectionLoader.tsx +3 -2
  56. package/src/components/Tag/Tag.styles.ts +22 -16
  57. package/src/components/Tag/Tag.tsx +1 -0
  58. package/src/components/Tree/Tree.GuideElbow.stories.tsx +220 -0
  59. package/src/components/Tree/Tree.types.ts +29 -1
  60. package/src/components/Tree/TreeBranchIndentGuide.test.tsx +213 -0
  61. package/src/components/Tree/TreeBranchIndentGuide.tsx +137 -11
  62. package/src/components/Typography/Link.tsx +5 -1
  63. package/src/index.ts +0 -1
  64. package/src/theme/global.ts +4 -1
  65. package/src/theme/index.ts +8 -4
  66. package/dist/components/MDXEditor/MDXEditor.d.ts +0 -6
  67. package/dist/components/MDXEditor/MDXEditor.d.ts.map +0 -1
  68. package/dist/components/MDXEditor/MDXEditor.js +0 -237
  69. package/dist/components/MDXEditor/MDXEditor.js.map +0 -1
  70. package/dist/components/MDXEditor/MDXEditor.mjs +0 -235
  71. package/dist/components/MDXEditor/MDXEditor.mjs.map +0 -1
  72. package/dist/components/MDXEditor/MDXEditor.types.d.ts +0 -7
  73. package/dist/components/MDXEditor/MDXEditor.types.d.ts.map +0 -1
  74. package/dist/components/MDXEditor/index.d.ts +0 -3
  75. package/dist/components/MDXEditor/index.d.ts.map +0 -1
  76. package/src/components/MDXEditor/MDXEditor.css +0 -40
  77. package/src/components/MDXEditor/MDXEditor.stories.tsx +0 -56
  78. package/src/components/MDXEditor/MDXEditor.tsx +0 -337
  79. package/src/components/MDXEditor/MDXEditor.types.ts +0 -7
  80. package/src/components/MDXEditor/index.ts +0 -2
@@ -3,18 +3,144 @@ import { TreeView as ChakraTreeView } from '@chakra-ui/react';
3
3
 
4
4
  import { TreeBranchIndentGuideProps } from './Tree.types';
5
5
 
6
+ // Extra per-level indentation in elbow mode. Guide-line trees read better
7
+ // with a little more horizontal air between the elbow and the row text,
8
+ // so each level indents this much further than the recipe default. The
9
+ // foot length does NOT grow with it (its default is derived from the
10
+ // original `--tree-indentation`), so the foot-to-text gap widens by the
11
+ // same amount.
12
+ const ELBOW_EXTRA_INDENT = '4px';
13
+
14
+ // The widened per-level indentation, defined on the guide's sibling rows
15
+ // so both the recipe's offset math and our pseudo-element math can share
16
+ // it. Root rows (depth 1) have no guide sibling, but their offset
17
+ // multiplies indentation by zero, so every level stays consistent.
18
+ const ELBOW_INDENT_VARS = {
19
+ '--tree-elbow-indentation': `calc(var(--tree-indentation) + ${ELBOW_EXTRA_INDENT})`,
20
+ } as const;
21
+
22
+ // Re-derive the recipe's `--tree-indentation-offset` (which feeds
23
+ // `--tree-offset`, the row's padding-start) from the widened indentation.
24
+ // Must be set on the same elements the recipe defines it on
25
+ // (item / branch-control) — inheritance can't override those.
26
+ const ELBOW_OFFSET_VARS = {
27
+ '--tree-indentation-offset':
28
+ 'calc(var(--tree-elbow-indentation) * var(--tree-depth))',
29
+ } as const;
30
+
31
+ // The parent rail column, measured from a child row (item / branch-control).
32
+ // A row's content starts at its own `--tree-offset`, and the parent rail
33
+ // sits exactly one (widened) indentation to its left (verified against the
34
+ // recipe's offset math for both the guide and the row slots).
35
+ const ROW_RAIL_COLUMN =
36
+ 'calc(var(--tree-offset) - var(--tree-elbow-indentation))';
37
+
38
+ // The same column, computed from the `branch` element itself. A branch
39
+ // only carries Ark's inline `--depth` (the recipe's `--tree-offset` is
40
+ // defined on item/branch-control, not here), so expand the recipe math:
41
+ // rail(x) = padding + indentation * (depth - 2) + icon * 0.5 * (depth - 1)
42
+ // — algebraically identical to ROW_RAIL_COLUMN for a row at `--depth`.
43
+ const BRANCH_RAIL_COLUMN =
44
+ 'calc(var(--tree-padding-inline) + var(--tree-elbow-indentation) * (var(--depth) - 2) + var(--tree-icon-size) * 0.5 * (var(--depth) - 1))';
45
+
6
46
  export const TreeBranchIndentGuide = forwardRef<
7
47
  HTMLDivElement,
8
48
  TreeBranchIndentGuideProps
9
- >((props, ref) => {
10
- // Chakra v3's `branchIndentGuide` slot already renders the vertical
11
- // line via `position: absolute`, `width: 1px`, `bg: border`, with
12
- // `insetInlineStart` auto-calculated from tree depth. Don't add
13
- // `ms`/`ps` (breaks the depth math, pushes the line over content)
14
- // or `borderInlineStartWidth` (stacks a second 1px stroke on top of
15
- // the slot's own bg-painted 1px). Only override `bg` to lighten.
16
- return (
17
- <ChakraTreeView.BranchIndentGuide ref={ref} bg="border.subtle" {...props} />
18
- );
19
- });
49
+ >(
50
+ (
51
+ {
52
+ elbow = false,
53
+ footLength = 'calc(var(--tree-indentation) - 4px)',
54
+ guideColor = 'border.default',
55
+ ...props
56
+ },
57
+ ref
58
+ ) => {
59
+ // Chakra v3's `branchIndentGuide` slot renders ONE absolutely-positioned
60
+ // vertical line per `branchContent` (its first child), `height: 100%`,
61
+ // with `insetInlineStart` auto-calculated from tree depth. Don't add
62
+ // `ms`/`ps` (breaks the depth math) or `borderInlineStartWidth` (stacks
63
+ // a second 1px stroke on the slot's own bg-painted 1px) — only `bg`.
64
+ //
65
+ // That single full-height rail cannot form a `└` on the last row: it
66
+ // always paints past the last row's centre down to the content bottom.
67
+ // So in `elbow` mode the slot's own rail is hidden (`bg: transparent`,
68
+ // the element stays as the CSS sibling anchor) and the guide lines are
69
+ // re-drawn per row on the guide's sibling rows (`[data-part="item"]`
70
+ // leaves and `[data-part="branch"]` subtrees):
71
+ //
72
+ // - every row gets a `::before` foot — the horizontal cross-stroke
73
+ // from the rail column toward the row content, pinned to the row's
74
+ // vertical centre;
75
+ // - non-last rows get a full-height vertical segment (`├`); for a
76
+ // branch it is drawn on the `[data-part="branch"]` element so it
77
+ // passes through the whole expanded subtree, like the original rail
78
+ // (zIndex 1 for the same paint-above-row-hover reason);
79
+ // - the LAST row's segment stops at the row's vertical centre where
80
+ // the foot meets it (`└`); for a branch that means half the
81
+ // branch-control only, so an expanded last branch hangs below the
82
+ // elbow with no rail running past it.
83
+ const foot = {
84
+ content: '""',
85
+ position: 'absolute',
86
+ insetBlockStart: '50%',
87
+ insetInlineStart: ROW_RAIL_COLUMN,
88
+ width: footLength,
89
+ height: '1px',
90
+ bg: guideColor,
91
+ } as const;
92
+ const rail = {
93
+ content: '""',
94
+ position: 'absolute',
95
+ insetBlockStart: '0',
96
+ insetInlineStart: ROW_RAIL_COLUMN,
97
+ width: '1px',
98
+ bg: guideColor,
99
+ } as const;
100
+ const elbowCss = elbow
101
+ ? {
102
+ '& ~ [data-part="item"]': {
103
+ ...ELBOW_INDENT_VARS,
104
+ ...ELBOW_OFFSET_VARS,
105
+ },
106
+ // branch-control reads --tree-elbow-indentation by inheritance,
107
+ // but the offset override must sit on the control itself.
108
+ '& ~ [data-part="branch"]': ELBOW_INDENT_VARS,
109
+ '& ~ [data-part="branch"] > [data-part="branch-control"]':
110
+ ELBOW_OFFSET_VARS,
111
+ '& ~ [data-part="item"]::before': foot,
112
+ '& ~ [data-part="branch"] > [data-part="branch-control"]::before':
113
+ foot,
114
+ '& ~ [data-part="item"]:not(:last-child)::after': {
115
+ ...rail,
116
+ insetBlockEnd: '0',
117
+ },
118
+ '& ~ [data-part="item"]:last-child::after': {
119
+ ...rail,
120
+ height: '50%',
121
+ },
122
+ '& ~ [data-part="branch"]:not(:last-child)::before': {
123
+ ...rail,
124
+ insetBlockEnd: '0',
125
+ insetInlineStart: BRANCH_RAIL_COLUMN,
126
+ zIndex: 1,
127
+ },
128
+ '& ~ [data-part="branch"]:last-child > [data-part="branch-control"]::after':
129
+ {
130
+ ...rail,
131
+ height: '50%',
132
+ },
133
+ }
134
+ : undefined;
135
+
136
+ return (
137
+ <ChakraTreeView.BranchIndentGuide
138
+ ref={ref}
139
+ bg={elbow ? 'transparent' : guideColor}
140
+ css={elbowCss}
141
+ {...props}
142
+ />
143
+ );
144
+ }
145
+ );
20
146
  TreeBranchIndentGuide.displayName = 'TreeBranchIndentGuide';
@@ -23,7 +23,11 @@ export const Link = forwardRef<HTMLAnchorElement, LinkCustomProps>(
23
23
  return (
24
24
  <ChakraLink
25
25
  ref={ref}
26
- fontWeight="semibold"
26
+ // Inherit the surrounding text weight so an inline link reads as part of
27
+ // its sentence (extrabold inside an H1, body weight inside a paragraph)
28
+ // rather than a fixed-semibold patch. Color + underline carry the link
29
+ // affordance. Override with an explicit `fontWeight` when needed.
30
+ fontWeight="inherit"
27
31
  wordBreak="keep-all"
28
32
  color={linkColor}
29
33
  _hover={{
package/src/index.ts CHANGED
@@ -53,7 +53,6 @@ export * from './components/LogicianProvider';
53
53
  export * from './components/Markdown';
54
54
  export * from './components/Masonry';
55
55
  export * from './components/MaxLengthIndicator';
56
- export * from './components/MDXEditor';
57
56
  export * from './components/Menu';
58
57
  export * from './components/Modal';
59
58
  export * from './components/MonthPicker';
@@ -26,7 +26,10 @@ export const globalCss = defineGlobalStyles({
26
26
 
27
27
  html: {
28
28
  height: 'var(--chakra-vh)',
29
- fontSize: 16,
29
+ // Global base font size. The whole type/spacing scale is em-relative, so
30
+ // this single value drives the app-wide baseline; surfaces that need a
31
+ // different base (e.g. FactChat chat at 16px) opt in via <ScaledContext>.
32
+ fontSize: 14,
30
33
  fontFamily: [
31
34
  pretendard.style.fontFamily,
32
35
  inter.style.fontFamily,
@@ -18,21 +18,25 @@ const SHARED_TEXT_STYLE_VALUES = {
18
18
  h1: {
19
19
  fontFamily: 'heading',
20
20
  fontSize: { base: '2.4em', md: '3em' }, // 38.4px → 48px
21
- fontWeight: 'bold',
21
+ // Display sizes carry the heaviest weight; the tight negative tracking
22
+ // above keeps extrabold from reading loose at 48px.
23
+ fontWeight: 'extrabold',
22
24
  lineHeight: '1.33',
23
25
  letterSpacing: '-0.02em',
24
26
  },
25
27
  h2: {
26
28
  fontFamily: 'heading',
27
29
  fontSize: { base: '2em', md: '2.5em' }, // 32px → 40px
28
- fontWeight: 'semibold',
30
+ fontWeight: 'extrabold',
29
31
  lineHeight: '1.33',
30
32
  letterSpacing: '-0.01em',
31
33
  },
32
34
  h3: {
33
35
  fontFamily: 'heading',
34
36
  fontSize: { base: '1.5em', md: '1.75em' }, // 24px → 28px
35
- fontWeight: 'semibold',
37
+ // Steps down to bold — the weight ramp tapers as size shrinks so heavy
38
+ // display weights don't muddy the smaller headings (h4/h5 stay lighter).
39
+ fontWeight: 'bold',
36
40
  lineHeight: '1.33',
37
41
  letterSpacing: '-0.01em',
38
42
  },
@@ -74,7 +78,7 @@ const SHARED_TEXT_STYLE_VALUES = {
74
78
  * Text styles for consistent typography across the application
75
79
  * Names match fontSize tokens for easy migration: fontStyle="h1" → textStyle="h1"
76
80
  *
77
- * Base font size: 16px (set in global.ts)
81
+ * Base font size: 14px (set in global.ts)
78
82
  * Responsive scaling using em units (relative to nearest ancestor font-size):
79
83
  * - Mobile (base): Slightly smaller for better readability on small screens
80
84
  * - Desktop (md+): Original design sizes
@@ -1,6 +0,0 @@
1
- import { MDXEditorMethods, MDXEditorProps as BaseEditorProps } from '@mdxeditor/editor';
2
- import '@mdxeditor/editor/style.css';
3
- import './MDXEditor.css';
4
- import type { MDXEditorProps } from './MDXEditor.types';
5
- export declare const MDXEditor: import("react").ForwardRefExoticComponent<MDXEditorProps & import("react").RefAttributes<BaseEditorProps & MDXEditorMethods>>;
6
- //# sourceMappingURL=MDXEditor.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"MDXEditor.d.ts","sourceRoot":"","sources":["../../../src/components/MDXEditor/MDXEditor.tsx"],"names":[],"mappings":"AAIA,OAAO,EAeL,gBAAgB,EAChB,cAAc,IAAI,eAAe,EAOlC,MAAM,mBAAmB,CAAC;AAE3B,OAAO,6BAA6B,CAAC;AACrC,OAAO,iBAAiB,CAAC;AAEzB,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAExD,eAAO,MAAM,SAAS,+HA4SpB,CAAC"}
@@ -1,237 +0,0 @@
1
- "use client";
2
- 'use strict';
3
-
4
- var jsxRuntime = require('react/jsx-runtime');
5
- var React = require('react');
6
- var react = require('@chakra-ui/react');
7
- var editor = require('@mdxeditor/editor');
8
- require('@mdxeditor/editor/style.css');
9
-
10
- const MDXEditor = React.forwardRef(({ containerProps, autoFocus = true, onError, ...rest }, ref) => {
11
- const [error, setError] = React.useState(null);
12
- // Resolve theme tokens to actual values
13
- const [space1, space2, space4] = react.useToken('spacing', ['1', '2', '4']);
14
- const [radiusSm] = react.useToken('radii', ['sm']);
15
- // 내부적으로 Editor 인스턴스를 참조하기 위한 로컬 ref
16
- const editorRef = React.useRef(null);
17
- // 부모 컴포넌트로 전달된 ref가 editorRef를 바라보도록 연결
18
- React.useImperativeHandle(ref, () => editorRef.current, []);
19
- const handleContainerClick = (e) => {
20
- // Only focus if clicking on the container itself, not on toolbar and table elements
21
- const target = e.target;
22
- const isToolbarClick = target.closest('.mdxeditor-toolbar');
23
- const isTableClick = target.closest('table');
24
- const isPopupClick = target.closest('.mdxeditor-popup-container');
25
- if (!isToolbarClick && !isTableClick && !isPopupClick) {
26
- editorRef.current?.focus();
27
- }
28
- };
29
- return (jsxRuntime.jsx(react.Box, { width: "100%", height: "100%", borderWidth: "1px", borderRadius: "lg", overflow: "hidden", onClick: handleContainerClick, cursor: "text", ...containerProps, css: {
30
- /**
31
- * Chakra v3 css prop styling notes:
32
- *
33
- * 1. All nested selectors require '&' prefix (e.g., '& .class', '& h1')
34
- * 2. Use full CSS property names (background, padding) instead of Chakra
35
- * shorthand props (bg, p) in nested selectors
36
- * 3. Color values must be resolved via useToken(), not token strings
37
- * 4. Font sizes use responsive objects: { base: '2.4em', md: '3em' }
38
- * 5. List styles must be explicitly defined (listStyleType, etc.)
39
- *
40
- * These requirements differ from v2's sx prop, which was more implicit.
41
- * v3 prioritizes performance and explicitness over automatic handling.
42
- */
43
- ...containerProps?.css,
44
- '& .mdxeditor': {
45
- width: '100%',
46
- minHeight: '300px',
47
- height: '100%',
48
- background: 'var(--chakra-colors-bg-surface)',
49
- display: 'flex',
50
- flexDirection: 'column',
51
- },
52
- '& .mdxeditor-toolbar': {
53
- display: 'flex',
54
- gap: space2,
55
- padding: space2,
56
- borderBottomWidth: '1px',
57
- background: 'var(--chakra-colors-bg-subtle)',
58
- flexShrink: 0,
59
- cursor: 'default',
60
- },
61
- // Toolbar icons. mdxeditor colors its toolbar svgs with its own
62
- // `--baseTextContrast` (its internal slate scale), which doesn't follow
63
- // our color mode — in dark mode they stay near-black (#1c2024) and all
64
- // but vanish against the dark toolbar. Flip them onto the semantic
65
- // foreground token so they track light/dark like the editor body text.
66
- '& .mdxeditor-toolbar svg': {
67
- color: 'var(--chakra-colors-fg-default)',
68
- },
69
- // Disabled toolbar buttons (e.g. undo/redo with nothing to undo) — keep
70
- // them dimmed but still mode-aware, instead of mdxeditor's light-only
71
- // border color.
72
- '& .mdxeditor-toolbar [data-disabled] svg': {
73
- color: 'var(--chakra-colors-fg-subtle)',
74
- },
75
- // Hover / pressed / toggled-on backgrounds. mdxeditor paints these with
76
- // `--baseBgActive` (its slate scale), which also doesn't track the color
77
- // mode — in dark mode it goes light-grey, so the now-light icons sit on a
78
- // light fill and disappear on hover and when a format is active. Flip the
79
- // fill onto the semantic hover token so it stays mode-aware.
80
- '& .mdxeditor-toolbar button:hover, & .mdxeditor-toolbar button[data-state="on"], & .mdxeditor-toolbar button:active': {
81
- background: 'var(--chakra-colors-bg-muted)',
82
- },
83
- // Block-type select trigger in the toolbar — mdxeditor themes it with
84
- // its own vars (left white), so flip it onto the semantic surface.
85
- '& [class*="_selectTrigger_"]': {
86
- background: 'var(--chakra-colors-bg-surface)',
87
- color: 'var(--chakra-colors-fg-default)',
88
- },
89
- // Target the root contenteditable wrapper
90
- '& [class*="_rootContentEditableWrapper_"]': {
91
- flex: 1,
92
- display: 'flex',
93
- flexDirection: 'column',
94
- minHeight: 0,
95
- height: '100%',
96
- overflow: 'auto',
97
- },
98
- // Target the actual contenteditable element
99
- '& [contenteditable="true"]': {
100
- flex: 1,
101
- minHeight: '100%',
102
- outline: 'none',
103
- },
104
- // Target any intermediate wrapper elements
105
- '& [class*="_contentEditable_"]': {
106
- flex: 1,
107
- display: 'flex',
108
- flexDirection: 'column',
109
- },
110
- '& .content-editable': {
111
- padding: space4,
112
- color: 'var(--chakra-colors-fg-default)',
113
- display: 'flex',
114
- flexDirection: 'column',
115
- gap: radiusSm,
116
- flex: 1,
117
- height: '100%',
118
- '& h1, & h2, & h3, & h4, & h5': {
119
- marginBottom: '2px',
120
- fontWeight: 'bold',
121
- },
122
- '& h1:not(:first-child), & h2:not(:first-child), & h3:not(:first-child), & h4:not(:first-child)': {
123
- marginTop: space1,
124
- },
125
- /**
126
- * Font sizes - Cannot be tokenized due to responsive objects
127
- *
128
- * Unlike spacing/radii/colors, fontSize values here are responsive objects
129
- * { base: '2.4em', md: '3em' } which cannot be stored as regular tokens
130
- * in Chakra v3. Only textStyles support responsive values, but we cannot
131
- * extract just the fontSize from textStyles using useToken().
132
- *
133
- * These values match theme/index.ts textStyles exactly and must be
134
- * manually synchronized when updating the theme:
135
- * - h1: { base: '2.4em', md: '3em' }
136
- * - h2: { base: '2em', md: '2.5em' }
137
- * - h3: { base: '1.5em', md: '1.75em' }
138
- * - h4: { base: '1.25em', md: '1.44em' }
139
- * - h5: { base: '1.1em', md: '1.2em' }
140
- */
141
- '& h1': {
142
- fontSize: { base: '2.4em', md: '3em' },
143
- },
144
- '& h2': {
145
- fontSize: { base: '2em', md: '2.5em' },
146
- },
147
- '& h3': {
148
- fontSize: { base: '1.5em', md: '1.75em' },
149
- },
150
- '& h4': {
151
- fontSize: { base: '1.25em', md: '1.44em' },
152
- },
153
- '& h5': {
154
- fontSize: { base: '1.1em', md: '1.2em' },
155
- },
156
- /**
157
- * List styling - IMPORTANT: v3 requires explicit list-style properties
158
- *
159
- * In Chakra v2, the `sx` prop automatically preserved browser default list styles.
160
- * In Chakra v3, the `css` prop is more explicit and performant, but requires
161
- * manual specification of list styles to override MDXEditor's CSS resets.
162
- *
163
- * Required properties:
164
- * - listStyleType: 'disc' (ul) or 'decimal' (ol) - Shows bullets/numbers
165
- * - listStylePosition: 'outside' - Places markers outside content box
166
- * - display: 'list-item' (on li) - Ensures proper list item rendering
167
- *
168
- * Why this changed: v3 optimized for speed by removing automatic style inference,
169
- * requiring more explicit style declarations.
170
- */
171
- '& ul': {
172
- marginTop: space2,
173
- paddingInlineStart: space4,
174
- listStyleType: 'disc',
175
- listStylePosition: 'outside',
176
- },
177
- '& ol': {
178
- marginTop: space2,
179
- paddingInlineStart: space4,
180
- listStyleType: 'decimal',
181
- listStylePosition: 'outside',
182
- },
183
- '& li': {
184
- lineHeight: '1.5',
185
- marginBottom: space2,
186
- display: 'list-item',
187
- },
188
- '& blockquote': {
189
- borderLeftWidth: '4px',
190
- borderLeftColor: 'var(--chakra-colors-primary-light)',
191
- background: 'var(--chakra-colors-primary-lighter)',
192
- paddingLeft: space4,
193
- paddingBlock: space2,
194
- marginBlock: space4,
195
- color: 'var(--chakra-colors-fg-muted)',
196
- },
197
- '& a': {
198
- color: 'var(--chakra-colors-primary-main)',
199
- textDecoration: 'underline',
200
- },
201
- '& code': {
202
- fontFamily: 'mono',
203
- background: 'var(--chakra-colors-bg-muted)',
204
- paddingInline: space1,
205
- borderRadius: radiusSm,
206
- '& span': {
207
- background: 'transparent',
208
- },
209
- },
210
- },
211
- '& .mdxeditor-diff-source-wrapper': {
212
- overflow: 'auto',
213
- },
214
- }, children: jsxRuntime.jsx(editor.MDXEditor, { ref: editorRef, contentEditableClassName: "content-editable", overlayContainer: typeof document !== 'undefined' ? document.body : undefined, autoFocus: autoFocus, onError: ({ error }) => {
215
- setError(error);
216
- onError?.(error);
217
- }, plugins: [
218
- editor.headingsPlugin({
219
- allowedHeadingLevels: [2, 3, 4, 5],
220
- }),
221
- editor.linkPlugin(),
222
- editor.listsPlugin(),
223
- editor.imagePlugin(),
224
- editor.quotePlugin(),
225
- editor.thematicBreakPlugin(),
226
- editor.markdownShortcutPlugin(),
227
- editor.tablePlugin(),
228
- editor.diffSourcePlugin(),
229
- editor.toolbarPlugin({
230
- toolbarContents: () => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(editor.UndoRedo, {}), jsxRuntime.jsx(editor.Separator, {}), jsxRuntime.jsx(editor.BoldItalicUnderlineToggles, {}), jsxRuntime.jsx(editor.CodeToggle, {}), jsxRuntime.jsx(editor.Separator, {}), jsxRuntime.jsx(editor.ListsToggle, {}), jsxRuntime.jsx(editor.Separator, {}), jsxRuntime.jsx(editor.BlockTypeSelect, {}), jsxRuntime.jsx(editor.Separator, {}), jsxRuntime.jsx(editor.InsertTable, {}), jsxRuntime.jsx(editor.InsertThematicBreak, {}), error && (jsxRuntime.jsx(editor.DiffSourceToggleWrapper, { options: ['rich-text', 'source'], children: jsxRuntime.jsx(jsxRuntime.Fragment, {}) }))] })),
231
- }),
232
- ], ...rest }) }));
233
- });
234
- MDXEditor.displayName = 'MDXEditor';
235
-
236
- exports.MDXEditor = MDXEditor;
237
- //# sourceMappingURL=MDXEditor.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"MDXEditor.js","sources":["../../../src/components/MDXEditor/MDXEditor.tsx"],"sourcesContent":[null],"names":["forwardRef","useState","useToken","useRef","useImperativeHandle","_jsx","Box","Editor","headingsPlugin","linkPlugin","listsPlugin","imagePlugin","quotePlugin","thematicBreakPlugin","markdownShortcutPlugin","tablePlugin","diffSourcePlugin","toolbarPlugin","_jsxs","_Fragment","UndoRedo","Separator","BoldItalicUnderlineToggles","CodeToggle","ListsToggle","BlockTypeSelect","InsertTable","InsertThematicBreak","DiffSourceToggleWrapper"],"mappings":"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"}