@sethumadhavan004/ink-editor 0.0.2 → 0.0.3
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/index.css +1 -1
- package/dist/index.css.map +1 -1
- package/dist/index.d.mts +5 -2
- package/dist/index.d.ts +5 -2
- package/dist/index.js +36 -6
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +39 -8
- package/dist/index.mjs.map +1 -1
- package/package.json +1 -1
package/dist/index.css
CHANGED
package/dist/index.css.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/styles/floating-toolbar.css","../src/styles/themes.css","../src/styles/page.css"],"sourcesContent":["/* Sticky wrapper — keeps toolbar floating in canvas while page scrolls beneath */\n.ink-floating-toolbar-wrap {\n position: sticky;\n top: 16px;\n z-index: 100;\n width: fit-content;\n margin-bottom: 16px;\n align-self: center;\n}\n\n/* Pill-shaped floating bar */\n.ink-floating-toolbar {\n display: flex;\n align-items: center;\n gap: 2px;\n padding: 6px 12px;\n background: var(--ink-page, #f5f4ed);\n border: 1px solid var(--ink-toolbar-border, #d4d0c4);\n border-radius: 12px;\n box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);\n white-space: nowrap;\n}\n\n.ink-toolbar-sep {\n display: inline-block;\n width: 1px;\n height: 20px;\n background: var(--ink-toolbar-border, #d4d0c4);\n margin: 0 6px;\n align-self: center;\n flex-shrink: 0;\n}\n\n.ink-toolbar-btn {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 30px;\n height: 30px;\n border: none;\n border-radius: 4px;\n background: transparent;\n cursor: pointer;\n color: var(--ink-text-muted, #6b6a64);\n transition: background 0.1s, color 0.1s;\n flex-shrink: 0;\n}\n\n.ink-toolbar-btn:hover {\n background: var(--ink-toolbar-border, #d4d0c4);\n color: var(--ink-text, #141413);\n}\n\n.ink-toolbar-btn--active {\n color: var(--ink-accent, #1b365d);\n}\n\n/* Popover container — parent must be position:relative */\n.ink-popover-anchor {\n position: relative;\n display: inline-flex;\n}\n\n.ink-popover {\n position: absolute;\n top: calc(100% + 8px);\n left: 50%;\n transform: translateX(-50%);\n background: var(--ink-page, #f5f4ed);\n border: 1px solid var(--ink-toolbar-border, #d4d0c4);\n border-radius: 8px;\n box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);\n padding: 12px;\n z-index: 200;\n min-width: 160px;\n}\n\n.ink-popover--right {\n left: auto;\n right: 0;\n transform: none;\n}\n\n/* Font picker list */\n.ink-font-picker {\n display: flex;\n flex-direction: column;\n gap: 2px;\n}\n\n.ink-font-option {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 6px 8px;\n border: none;\n border-radius: 4px;\n background: transparent;\n cursor: pointer;\n color: var(--ink-text, #141413);\n text-align: left;\n width: 100%;\n transition: background 0.1s;\n}\n\n.ink-font-option:hover {\n background: var(--ink-toolbar-border, #d4d0c4);\n}\n\n.ink-font-option--active {\n background: var(--ink-toolbar-border, #d4d0c4);\n font-weight: 600;\n}\n\n/* Color panel rows */\n.ink-color-panel {\n display: flex;\n flex-direction: column;\n gap: 10px;\n min-width: 220px;\n}\n\n.ink-color-row {\n display: flex;\n align-items: center;\n gap: 6px;\n}\n\n.ink-color-label {\n font-size: 11px;\n color: var(--ink-text-muted, #6b6a64);\n width: 46px;\n flex-shrink: 0;\n}\n\n.ink-swatches {\n display: flex;\n gap: 4px;\n align-items: center;\n flex-wrap: nowrap;\n}\n\n.ink-swatch {\n width: 20px;\n height: 20px;\n border-radius: 50%;\n border: 2px solid transparent;\n cursor: pointer;\n flex-shrink: 0;\n transition: transform 0.1s, border-color 0.1s;\n}\n\n.ink-swatch:hover {\n transform: scale(1.15);\n}\n\n.ink-swatch--active {\n border-color: var(--ink-accent, #1b365d);\n}\n\n.ink-color-custom {\n width: 22px;\n height: 22px;\n border-radius: 50%;\n border: 2px solid var(--ink-toolbar-border, #d4d0c4);\n cursor: pointer;\n padding: 0;\n background: none;\n overflow: hidden;\n flex-shrink: 0;\n}\n\n.ink-color-custom input[type=\"color\"] {\n width: 200%;\n height: 200%;\n margin: -50%;\n border: none;\n padding: 0;\n cursor: pointer;\n background: none;\n}\n",".ink-page-wrap[data-theme=\"parchment\"] {\n --ink-bg: #e0ddd4;\n --ink-page: #f5f4ed;\n --ink-shadow: 0 4px 24px rgba(0, 0, 0, 0.05);\n --ink-border-line: #c8c4b8;\n --ink-accent: #1b365d;\n --ink-text: #141413;\n --ink-text-muted: #6b6a64;\n --ink-toolbar-bg: #edeae0;\n --ink-toolbar-border: #d4d0c4;\n --ink-font-body: Charter, Georgia, 'Palatino Linotype', serif;\n}\n\n.ink-page-wrap[data-theme=\"minimal\"] {\n --ink-bg: #e8e8e8;\n --ink-page: #ffffff;\n --ink-shadow: 0 2px 12px rgba(0, 0, 0, 0.18);\n --ink-border-line: #d0d0d0;\n --ink-accent: #2563eb;\n --ink-text: #111111;\n --ink-text-muted: #888888;\n --ink-toolbar-bg: #f5f5f5;\n --ink-toolbar-border: #e0e0e0;\n --ink-font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\n}\n","@import './themes.css';\r\n\r\n.ink-page-wrap {\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n padding: 32px 0;\r\n background:
|
|
1
|
+
{"version":3,"sources":["../src/styles/floating-toolbar.css","../src/styles/themes.css","../src/styles/page.css"],"sourcesContent":["/* Sticky wrapper — keeps toolbar floating in canvas while page scrolls beneath */\n.ink-floating-toolbar-wrap {\n position: sticky;\n top: 16px;\n z-index: 100;\n width: fit-content;\n margin-bottom: 16px;\n align-self: center;\n}\n\n/* Pill-shaped floating bar */\n.ink-floating-toolbar {\n display: flex;\n align-items: center;\n gap: 2px;\n padding: 6px 12px;\n background: var(--ink-page, #f5f4ed);\n border: 1px solid var(--ink-toolbar-border, #d4d0c4);\n border-radius: 12px;\n box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);\n white-space: nowrap;\n}\n\n.ink-toolbar-sep {\n display: inline-block;\n width: 1px;\n height: 20px;\n background: var(--ink-toolbar-border, #d4d0c4);\n margin: 0 6px;\n align-self: center;\n flex-shrink: 0;\n}\n\n.ink-toolbar-btn {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 30px;\n height: 30px;\n border: none;\n border-radius: 4px;\n background: transparent;\n cursor: pointer;\n color: var(--ink-text-muted, #6b6a64);\n transition: background 0.1s, color 0.1s;\n flex-shrink: 0;\n}\n\n.ink-toolbar-btn:hover {\n background: var(--ink-toolbar-border, #d4d0c4);\n color: var(--ink-text, #141413);\n}\n\n.ink-toolbar-btn--active {\n color: var(--ink-accent, #1b365d);\n}\n\n/* Popover container — parent must be position:relative */\n.ink-popover-anchor {\n position: relative;\n display: inline-flex;\n}\n\n.ink-popover {\n position: absolute;\n top: calc(100% + 8px);\n left: 50%;\n transform: translateX(-50%);\n background: var(--ink-page, #f5f4ed);\n border: 1px solid var(--ink-toolbar-border, #d4d0c4);\n border-radius: 8px;\n box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);\n padding: 12px;\n z-index: 200;\n min-width: 160px;\n}\n\n.ink-popover--right {\n left: auto;\n right: 0;\n transform: none;\n}\n\n/* Font picker list */\n.ink-font-picker {\n display: flex;\n flex-direction: column;\n gap: 2px;\n}\n\n.ink-font-option {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 6px 8px;\n border: none;\n border-radius: 4px;\n background: transparent;\n cursor: pointer;\n color: var(--ink-text, #141413);\n text-align: left;\n width: 100%;\n transition: background 0.1s;\n}\n\n.ink-font-option:hover {\n background: var(--ink-toolbar-border, #d4d0c4);\n}\n\n.ink-font-option--active {\n background: var(--ink-toolbar-border, #d4d0c4);\n font-weight: 600;\n}\n\n/* Color panel rows */\n.ink-color-panel {\n display: flex;\n flex-direction: column;\n gap: 10px;\n min-width: 220px;\n}\n\n.ink-color-row {\n display: flex;\n align-items: center;\n gap: 6px;\n}\n\n.ink-color-label {\n font-size: 11px;\n color: var(--ink-text-muted, #6b6a64);\n width: 46px;\n flex-shrink: 0;\n}\n\n.ink-swatches {\n display: flex;\n gap: 4px;\n align-items: center;\n flex-wrap: nowrap;\n}\n\n.ink-swatch {\n width: 20px;\n height: 20px;\n border-radius: 50%;\n border: 2px solid transparent;\n cursor: pointer;\n flex-shrink: 0;\n transition: transform 0.1s, border-color 0.1s;\n}\n\n.ink-swatch:hover {\n transform: scale(1.15);\n}\n\n.ink-swatch--active {\n border-color: var(--ink-accent, #1b365d);\n}\n\n.ink-color-custom {\n width: 22px;\n height: 22px;\n border-radius: 50%;\n border: 2px solid var(--ink-toolbar-border, #d4d0c4);\n cursor: pointer;\n padding: 0;\n background: none;\n overflow: hidden;\n flex-shrink: 0;\n}\n\n.ink-color-custom input[type=\"color\"] {\n width: 200%;\n height: 200%;\n margin: -50%;\n border: none;\n padding: 0;\n cursor: pointer;\n background: none;\n}\n",".ink-page-wrap[data-theme=\"parchment\"] {\n --ink-bg: #e0ddd4;\n --ink-page: #f5f4ed;\n --ink-shadow: 0 4px 24px rgba(0, 0, 0, 0.05);\n --ink-border-line: #c8c4b8;\n --ink-accent: #1b365d;\n --ink-text: #141413;\n --ink-text-muted: #6b6a64;\n --ink-toolbar-bg: #edeae0;\n --ink-toolbar-border: #d4d0c4;\n --ink-font-body: Charter, Georgia, 'Palatino Linotype', serif;\n}\n\n.ink-page-wrap[data-theme=\"minimal\"] {\n --ink-bg: #e8e8e8;\n --ink-page: #ffffff;\n --ink-shadow: 0 2px 12px rgba(0, 0, 0, 0.18);\n --ink-border-line: #d0d0d0;\n --ink-accent: #2563eb;\n --ink-text: #111111;\n --ink-text-muted: #888888;\n --ink-toolbar-bg: #f5f5f5;\n --ink-toolbar-border: #e0e0e0;\n --ink-font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\n}\n","@import './themes.css';\r\n\r\n.ink-page-wrap {\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n padding: 32px 0;\r\n background: transparent;\r\n min-height: 100vh;\r\n}\r\n\r\n.ink-page-card {\r\n background: var(--ink-page);\r\n box-shadow: var(--ink-shadow);\r\n box-sizing: border-box;\r\n font-family: var(--ink-font-body);\r\n color: var(--ink-text);\r\n}\r\n\r\n.ink-page-card .ProseMirror {\r\n outline: none;\r\n width: var(--ink-body-width, 100%);\r\n min-height: var(--ink-body-height, 600px);\r\n line-height: 1.7;\r\n padding-top: 28px;\r\n}\r\n\r\n\r\n/* Page gap widget — injected by ProseMirror plugin at each page boundary */\r\n.ink-page-gap {\r\n display: block;\r\n width: calc(100% + var(--ink-padding-left, 28mm) + var(--ink-padding-right, 28mm));\r\n margin-left: calc(-1 * var(--ink-padding-left, 28mm));\r\n background: var(--ink-bg);\r\n border-top: 2px solid var(--ink-border-line);\r\n border-bottom: 2px solid var(--ink-border-line);\r\n box-sizing: border-box;\r\n pointer-events: none;\r\n user-select: none;\r\n -webkit-user-select: none;\r\n}\r\n\r\n/* Lock paragraph line-height — zero margins so ruled lines stay on grid */\r\n.ink-page-card .ProseMirror p {\r\n line-height: 28px;\r\n margin: 0;\r\n padding: 0;\r\n}\r\n\r\n\r\n/* Ruled lines — toggled by ink-ruled class on .ink-page-card */\r\n.ink-page-card.ink-ruled .ProseMirror {\r\n background-image: repeating-linear-gradient(\r\n to bottom,\r\n transparent 0px,\r\n transparent 27px,\r\n var(--ink-border-line, #c8c4b8) 27px,\r\n var(--ink-border-line, #c8c4b8) 28px\r\n );\r\n background-size: 100% 28px;\r\n background-position-y: 28px;\r\n background-attachment: local;\r\n}\r\n"],"mappings":"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","names":[]}
|
package/dist/index.d.mts
CHANGED
|
@@ -1,8 +1,9 @@
|
|
|
1
1
|
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
|
+
import { ReactNode } from 'react';
|
|
2
3
|
|
|
3
4
|
type PageSize = 'A4' | 'Letter';
|
|
4
5
|
type Theme = 'parchment' | 'minimal';
|
|
5
|
-
type ToolbarKey = 'bold' | 'italic' | 'underline' | 'h1' | 'h2' | 'align' | 'list' | 'indent' | 'lines';
|
|
6
|
+
type ToolbarKey = 'bold' | 'italic' | 'underline' | 'h1' | 'h2' | 'align' | 'list' | 'indent' | 'lines' | 'addpage';
|
|
6
7
|
type FontKey = 'cursive' | 'serif' | 'sans' | 'slab' | 'mono';
|
|
7
8
|
interface ThemeColors {
|
|
8
9
|
canvasBg: string;
|
|
@@ -21,7 +22,9 @@ interface InkEditorProps {
|
|
|
21
22
|
toolbar?: ToolbarKey[];
|
|
22
23
|
initialFont?: FontKey;
|
|
23
24
|
initialColors?: Partial<ThemeColors>;
|
|
25
|
+
toolbarStart?: ReactNode[];
|
|
26
|
+
toolbarEnd?: ReactNode[];
|
|
24
27
|
}
|
|
25
|
-
declare function InkEditor({ pageSize, onChange, theme, toolbar, initialFont, initialColors, }: InkEditorProps): react_jsx_runtime.JSX.Element;
|
|
28
|
+
declare function InkEditor({ pageSize, onChange, theme, toolbar, initialFont, initialColors, toolbarStart, toolbarEnd, }: InkEditorProps): react_jsx_runtime.JSX.Element;
|
|
26
29
|
|
|
27
30
|
export { type FontKey, InkEditor, type InkEditorProps, MINIMAL_DEFAULTS, PARCHMENT_DEFAULTS, type PageSize, type Theme, type ThemeColors, type ToolbarKey };
|
package/dist/index.d.ts
CHANGED
|
@@ -1,8 +1,9 @@
|
|
|
1
1
|
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
|
+
import { ReactNode } from 'react';
|
|
2
3
|
|
|
3
4
|
type PageSize = 'A4' | 'Letter';
|
|
4
5
|
type Theme = 'parchment' | 'minimal';
|
|
5
|
-
type ToolbarKey = 'bold' | 'italic' | 'underline' | 'h1' | 'h2' | 'align' | 'list' | 'indent' | 'lines';
|
|
6
|
+
type ToolbarKey = 'bold' | 'italic' | 'underline' | 'h1' | 'h2' | 'align' | 'list' | 'indent' | 'lines' | 'addpage';
|
|
6
7
|
type FontKey = 'cursive' | 'serif' | 'sans' | 'slab' | 'mono';
|
|
7
8
|
interface ThemeColors {
|
|
8
9
|
canvasBg: string;
|
|
@@ -21,7 +22,9 @@ interface InkEditorProps {
|
|
|
21
22
|
toolbar?: ToolbarKey[];
|
|
22
23
|
initialFont?: FontKey;
|
|
23
24
|
initialColors?: Partial<ThemeColors>;
|
|
25
|
+
toolbarStart?: ReactNode[];
|
|
26
|
+
toolbarEnd?: ReactNode[];
|
|
24
27
|
}
|
|
25
|
-
declare function InkEditor({ pageSize, onChange, theme, toolbar, initialFont, initialColors, }: InkEditorProps): react_jsx_runtime.JSX.Element;
|
|
28
|
+
declare function InkEditor({ pageSize, onChange, theme, toolbar, initialFont, initialColors, toolbarStart, toolbarEnd, }: InkEditorProps): react_jsx_runtime.JSX.Element;
|
|
26
29
|
|
|
27
30
|
export { type FontKey, InkEditor, type InkEditorProps, MINIMAL_DEFAULTS, PARCHMENT_DEFAULTS, type PageSize, type Theme, type ThemeColors, type ToolbarKey };
|
package/dist/index.js
CHANGED
|
@@ -2411,7 +2411,9 @@ function FloatingToolbar({
|
|
|
2411
2411
|
font,
|
|
2412
2412
|
onFontChange,
|
|
2413
2413
|
colors,
|
|
2414
|
-
onColorsChange
|
|
2414
|
+
onColorsChange,
|
|
2415
|
+
toolbarStart,
|
|
2416
|
+
toolbarEnd
|
|
2415
2417
|
}) {
|
|
2416
2418
|
const [openPanel, setOpenPanel] = (0, import_react3.useState)(null);
|
|
2417
2419
|
(0, import_react3.useEffect)(() => {
|
|
@@ -2502,10 +2504,26 @@ function FloatingToolbar({
|
|
|
2502
2504
|
isActive: () => ruled,
|
|
2503
2505
|
action: onToggleRuled
|
|
2504
2506
|
}]
|
|
2507
|
+
},
|
|
2508
|
+
{
|
|
2509
|
+
key: "addpage",
|
|
2510
|
+
configs: [{
|
|
2511
|
+
label: "Add page",
|
|
2512
|
+
icon: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_lucide_react3.FilePlus, { size: iconSize }),
|
|
2513
|
+
isActive: () => false,
|
|
2514
|
+
action: () => {
|
|
2515
|
+
const end = editor.state.doc.content.size - 1;
|
|
2516
|
+
editor.chain().focus().insertContentAt(end, [{ type: "paragraph" }, { type: "paragraph" }]).run();
|
|
2517
|
+
}
|
|
2518
|
+
}]
|
|
2505
2519
|
}
|
|
2506
2520
|
];
|
|
2507
2521
|
const activeGroups = allGroups.filter((g) => buttons.includes(g.key));
|
|
2508
2522
|
return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "ink-floating-toolbar-wrap", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "ink-floating-toolbar", role: "toolbar", "aria-label": "Text formatting", children: [
|
|
2523
|
+
toolbarStart && toolbarStart.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
|
|
2524
|
+
toolbarStart.map((node, i) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { style: { display: "contents" }, children: node }, i)),
|
|
2525
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Sep, {})
|
|
2526
|
+
] }),
|
|
2509
2527
|
activeGroups.map((group, gi) => /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("span", { className: "ink-toolbar-group", style: { display: "contents" }, children: [
|
|
2510
2528
|
group.configs.map((cfg) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
|
|
2511
2529
|
"button",
|
|
@@ -2541,7 +2559,11 @@ function FloatingToolbar({
|
|
|
2541
2559
|
onToggle: () => togglePanel("color"),
|
|
2542
2560
|
onClose: () => setOpenPanel(null)
|
|
2543
2561
|
}
|
|
2544
|
-
)
|
|
2562
|
+
),
|
|
2563
|
+
toolbarEnd && toolbarEnd.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
|
|
2564
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Sep, {}),
|
|
2565
|
+
toolbarEnd.map((node, i) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { style: { display: "contents" }, children: node }, i))
|
|
2566
|
+
] })
|
|
2545
2567
|
] }) });
|
|
2546
2568
|
}
|
|
2547
2569
|
|
|
@@ -2557,7 +2579,9 @@ function PagedEditorContent({
|
|
|
2557
2579
|
font,
|
|
2558
2580
|
onFontChange,
|
|
2559
2581
|
colors,
|
|
2560
|
-
onColorsChange
|
|
2582
|
+
onColorsChange,
|
|
2583
|
+
toolbarStart,
|
|
2584
|
+
toolbarEnd
|
|
2561
2585
|
}) {
|
|
2562
2586
|
const widthPx = getPageWidthPx(pageSize);
|
|
2563
2587
|
const bodyWidthPx = getBodyWidthPx(pageSize);
|
|
@@ -2589,7 +2613,9 @@ function PagedEditorContent({
|
|
|
2589
2613
|
font,
|
|
2590
2614
|
onFontChange,
|
|
2591
2615
|
colors,
|
|
2592
|
-
onColorsChange
|
|
2616
|
+
onColorsChange,
|
|
2617
|
+
toolbarStart,
|
|
2618
|
+
toolbarEnd
|
|
2593
2619
|
}
|
|
2594
2620
|
),
|
|
2595
2621
|
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
|
|
@@ -2623,7 +2649,9 @@ function InkEditor({
|
|
|
2623
2649
|
theme = "parchment",
|
|
2624
2650
|
toolbar = DEFAULT_TOOLBAR,
|
|
2625
2651
|
initialFont = "cursive",
|
|
2626
|
-
initialColors
|
|
2652
|
+
initialColors,
|
|
2653
|
+
toolbarStart,
|
|
2654
|
+
toolbarEnd
|
|
2627
2655
|
}) {
|
|
2628
2656
|
const [ruled, setRuled] = (0, import_react6.useState)(false);
|
|
2629
2657
|
const [font, setFont] = (0, import_react6.useState)(initialFont);
|
|
@@ -2660,7 +2688,9 @@ function InkEditor({
|
|
|
2660
2688
|
font,
|
|
2661
2689
|
onFontChange: setFont,
|
|
2662
2690
|
colors,
|
|
2663
|
-
onColorsChange: setColors
|
|
2691
|
+
onColorsChange: setColors,
|
|
2692
|
+
toolbarStart,
|
|
2693
|
+
toolbarEnd
|
|
2664
2694
|
}
|
|
2665
2695
|
);
|
|
2666
2696
|
}
|