@kubex/zinc 1.1.63 → 1.1.65
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/custom-elements.json +1152 -8
- package/dist/vscode.html-custom-data.json +58 -1
- package/dist/web-types.json +149 -2
- package/dist/zn.d.ts +187 -0
- package/dist/zn.min.js +693 -536
- package/docs/pages/components/remarkd-editor.md +119 -0
- package/package.json +3 -2
- package/src/components/file/file.component.ts +16 -1
- package/src/components/page-builder/page-builder.component.ts +118 -54
- package/src/components/query-builder/query-builder.component.ts +16 -7
- package/src/components/remarkd-editor/index.ts +12 -0
- package/src/components/remarkd-editor/remarkd-editor.component.ts +937 -0
- package/src/components/remarkd-editor/remarkd-editor.scss +344 -0
- package/src/components/remarkd-editor/remarkd-editor.test.ts +181 -0
- package/src/components/tabs/tabs.component.ts +9 -4
- package/src/components/tabs/tabs.test.ts +42 -1
- package/src/zinc.ts +1 -0
- package/web-test-runner.config.js +2 -2
|
@@ -2646,8 +2646,18 @@
|
|
|
2646
2646
|
},
|
|
2647
2647
|
{
|
|
2648
2648
|
"name": "zn-page-builder",
|
|
2649
|
-
"description": "A config-driven page composer: a palette of predefined section types, a linear\ncanvas of section cards, and an inspector for editing each section's content.\n---\n\n\n### **Events:**\n - **zn-page-change** - Emitted whenever the page state changes. `event.detail.state` is the new PageState.\n- **zn-page-selection-change** - Emitted when the selected section changes. `event.detail.sectionId`.\n\n### **Methods:**\n - **addSection(type: _string_, index: _number_): _PageSection | null_** - Adds a section of a registered type at `index` (default: end). Returns null for unknown types.\n- **addSectionToSlot(type: _string_, containerId: _string_, slotIndex: _number_): _PageSection | null_** - Adds a new section of a registered type into a container's slot. Returns null if not allowed.\n\n### **Slots:**\n - **config** - `<template type=\"…\">` declarations; never displayed. Each template's attributes (type, label, icon, icon-library, color, category, description, slots, accepts) declare a palette entry and its content declares the inspector form for that type. `slots` makes the section a container with that many child slots; `accepts` is a comma-separated list of the type keys its slots allow.\n- **header-left** - Actions shown on the left of the header bar.\n- **header-right** - Actions shown on the right of the header bar.\n\n### **CSS Parts:**\n - **base** - The grid wrapper.\n- **header** - The full-width header action bar (only rendered when header slots are filled).\n- **palette** - The left palette panel.\n- **canvas** - The centre section-card canvas.\n- **inspector** - The right panel while a section is selected.",
|
|
2649
|
+
"description": "A config-driven page composer: a palette of predefined section types, a linear\ncanvas of section cards, and an inspector for editing each section's content.\n---\n\n\n### **Events:**\n - **zn-page-change** - Emitted whenever the page state changes. `event.detail.state` is the new PageState.\n- **zn-page-selection-change** - Emitted when the selected section changes. `event.detail.sectionId`.\n\n### **Methods:**\n - **checkValidity(): _boolean_** - Checks for validity but does not show a validation message.\n- **getForm(): _HTMLFormElement | null_** - Gets the associated form, if one exists.\n- **reportValidity(): _boolean_** - Checks for validity and shows the browser's validation message if the control is invalid.\n- **setCustomValidity(_message)** - Sets a custom validation message. Pass an empty string to restore validity.\n- **addSection(type: _string_, index: _number_): _PageSection | null_** - Adds a section of a registered type at `index` (default: end). Returns null for unknown types.\n- **addSectionToSlot(type: _string_, containerId: _string_, slotIndex: _number_): _PageSection | null_** - Adds a new section of a registered type into a container's slot. Returns null if not allowed.\n\n### **Slots:**\n - **config** - `<template type=\"…\">` declarations; never displayed. Each template's attributes (type, label, icon, icon-library, color, category, description, slots, accepts) declare a palette entry and its content declares the inspector form for that type. `slots` makes the section a container with that many child slots; `accepts` is a comma-separated list of the type keys its slots allow.\n- **header-left** - Actions shown on the left of the header bar.\n- **header-right** - Actions shown on the right of the header bar.\n\n### **CSS Parts:**\n - **base** - The grid wrapper.\n- **header** - The full-width header action bar (only rendered when header slots are filled).\n- **palette** - The left palette panel.\n- **canvas** - The centre section-card canvas.\n- **inspector** - The right panel while a section is selected.",
|
|
2650
2650
|
"attributes": [
|
|
2651
|
+
{
|
|
2652
|
+
"name": "name",
|
|
2653
|
+
"description": "The name of the control, submitted as a name/value pair with form data.",
|
|
2654
|
+
"values": []
|
|
2655
|
+
},
|
|
2656
|
+
{
|
|
2657
|
+
"name": "form",
|
|
2658
|
+
"description": "Associates the control with a form by id. The form must be in the same document or shadow root.",
|
|
2659
|
+
"values": []
|
|
2660
|
+
},
|
|
2651
2661
|
{
|
|
2652
2662
|
"name": "config",
|
|
2653
2663
|
"description": "The page state as a JSON string. Parsed on set; invalid JSON is ignored with a warning.",
|
|
@@ -3253,6 +3263,53 @@
|
|
|
3253
3263
|
}
|
|
3254
3264
|
]
|
|
3255
3265
|
},
|
|
3266
|
+
{
|
|
3267
|
+
"name": "zn-remarkd-editor",
|
|
3268
|
+
"description": "A Notion-style block editor for remarkd content. Blocks render inline; click one to edit its source.\n---\n\n\n### **Events:**\n - **zn-input** - Emitted on each keystroke while editing a block.\n- **zn-change** - Emitted when a block edit is committed and the value changes.\n\n### **Methods:**\n - **focus()** - Starts editing the first block, or a new block if the document is empty.\n- **blur()** - Commits any in-progress block edit.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **toolbar** - The always-visible block-insert toolbar.\n- **block** - A rendered block wrapper.\n- **rendered** - The rendered remarkd output of a block.\n- **input** - The textarea shown while editing a block.\n- **slash-menu** - The context menu opened by typing \"/\" in a block.\n- **image-controls** - The caption / alignment / size panel shown when an image block is clicked.",
|
|
3269
|
+
"attributes": [
|
|
3270
|
+
{
|
|
3271
|
+
"name": "name",
|
|
3272
|
+
"description": "The name of the control, submitted as part of form data.",
|
|
3273
|
+
"values": []
|
|
3274
|
+
},
|
|
3275
|
+
{
|
|
3276
|
+
"name": "value",
|
|
3277
|
+
"description": "The current remarkd source.",
|
|
3278
|
+
"values": []
|
|
3279
|
+
},
|
|
3280
|
+
{
|
|
3281
|
+
"name": "placeholder",
|
|
3282
|
+
"description": "Placeholder shown when the document is empty.",
|
|
3283
|
+
"values": []
|
|
3284
|
+
},
|
|
3285
|
+
{
|
|
3286
|
+
"name": "attachment-url",
|
|
3287
|
+
"description": "Endpoint for image uploads — required for image support. Posting the file\nmetadata here must return `{uploadPath, uploadUrl}`; the file is then PUT\nto `uploadUrl` and the returned `uploadPath` is embedded as the image URL.",
|
|
3288
|
+
"values": []
|
|
3289
|
+
},
|
|
3290
|
+
{
|
|
3291
|
+
"name": "required",
|
|
3292
|
+
"description": "Makes the editor required for form submission.",
|
|
3293
|
+
"values": []
|
|
3294
|
+
},
|
|
3295
|
+
{
|
|
3296
|
+
"name": "readonly",
|
|
3297
|
+
"description": "Makes the editor read-only.",
|
|
3298
|
+
"values": []
|
|
3299
|
+
},
|
|
3300
|
+
{
|
|
3301
|
+
"name": "disabled",
|
|
3302
|
+
"description": "Disables the editor.",
|
|
3303
|
+
"values": []
|
|
3304
|
+
}
|
|
3305
|
+
],
|
|
3306
|
+
"references": [
|
|
3307
|
+
{
|
|
3308
|
+
"name": "Documentation",
|
|
3309
|
+
"url": "https://zinc.style/components/remarkd-editor"
|
|
3310
|
+
}
|
|
3311
|
+
]
|
|
3312
|
+
},
|
|
3256
3313
|
{
|
|
3257
3314
|
"name": "zn-reveal",
|
|
3258
3315
|
"description": "Short summary of the component's intended use.\n---\n\n\n### **Events:**\n - **zn-event-name** - Emitted as an example.\n\n### **Slots:**\n - _default_ - The default slot.\n- **example** - An example slot.\n\n### **CSS Properties:**\n - **--example** - An example CSS custom property. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
|
package/dist/web-types.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"$schema": "https://raw.githubusercontent.com/JetBrains/web-types/master/schema/web-types.json",
|
|
3
3
|
"name": "@kubex/zinc",
|
|
4
|
-
"version": "1.1.
|
|
4
|
+
"version": "1.1.65",
|
|
5
5
|
"description-markup": "markdown",
|
|
6
6
|
"contributions": {
|
|
7
7
|
"html": {
|
|
@@ -6234,9 +6234,19 @@
|
|
|
6234
6234
|
},
|
|
6235
6235
|
{
|
|
6236
6236
|
"name": "zn-page-builder",
|
|
6237
|
-
"description": "A config-driven page composer: a palette of predefined section types, a linear\ncanvas of section cards, and an inspector for editing each section's content.\n---\n\n\n### **Events:**\n - **zn-page-change** - Emitted whenever the page state changes. `event.detail.state` is the new PageState.\n- **zn-page-selection-change** - Emitted when the selected section changes. `event.detail.sectionId`.\n\n### **Methods:**\n - **addSection(type: _string_, index: _number_): _PageSection | null_** - Adds a section of a registered type at `index` (default: end). Returns null for unknown types.\n- **addSectionToSlot(type: _string_, containerId: _string_, slotIndex: _number_): _PageSection | null_** - Adds a new section of a registered type into a container's slot. Returns null if not allowed.\n\n### **Slots:**\n - **config** - `<template type=\"…\">` declarations; never displayed. Each template's attributes (type, label, icon, icon-library, color, category, description, slots, accepts) declare a palette entry and its content declares the inspector form for that type. `slots` makes the section a container with that many child slots; `accepts` is a comma-separated list of the type keys its slots allow.\n- **header-left** - Actions shown on the left of the header bar.\n- **header-right** - Actions shown on the right of the header bar.\n\n### **CSS Parts:**\n - **base** - The grid wrapper.\n- **header** - The full-width header action bar (only rendered when header slots are filled).\n- **palette** - The left palette panel.\n- **canvas** - The centre section-card canvas.\n- **inspector** - The right panel while a section is selected.",
|
|
6237
|
+
"description": "A config-driven page composer: a palette of predefined section types, a linear\ncanvas of section cards, and an inspector for editing each section's content.\n---\n\n\n### **Events:**\n - **zn-page-change** - Emitted whenever the page state changes. `event.detail.state` is the new PageState.\n- **zn-page-selection-change** - Emitted when the selected section changes. `event.detail.sectionId`.\n\n### **Methods:**\n - **checkValidity(): _boolean_** - Checks for validity but does not show a validation message.\n- **getForm(): _HTMLFormElement | null_** - Gets the associated form, if one exists.\n- **reportValidity(): _boolean_** - Checks for validity and shows the browser's validation message if the control is invalid.\n- **setCustomValidity(_message)** - Sets a custom validation message. Pass an empty string to restore validity.\n- **addSection(type: _string_, index: _number_): _PageSection | null_** - Adds a section of a registered type at `index` (default: end). Returns null for unknown types.\n- **addSectionToSlot(type: _string_, containerId: _string_, slotIndex: _number_): _PageSection | null_** - Adds a new section of a registered type into a container's slot. Returns null if not allowed.\n\n### **Slots:**\n - **config** - `<template type=\"…\">` declarations; never displayed. Each template's attributes (type, label, icon, icon-library, color, category, description, slots, accepts) declare a palette entry and its content declares the inspector form for that type. `slots` makes the section a container with that many child slots; `accepts` is a comma-separated list of the type keys its slots allow.\n- **header-left** - Actions shown on the left of the header bar.\n- **header-right** - Actions shown on the right of the header bar.\n\n### **CSS Parts:**\n - **base** - The grid wrapper.\n- **header** - The full-width header action bar (only rendered when header slots are filled).\n- **palette** - The left palette panel.\n- **canvas** - The centre section-card canvas.\n- **inspector** - The right panel while a section is selected.",
|
|
6238
6238
|
"doc-url": "",
|
|
6239
6239
|
"attributes": [
|
|
6240
|
+
{
|
|
6241
|
+
"name": "name",
|
|
6242
|
+
"description": "The name of the control, submitted as a name/value pair with form data.",
|
|
6243
|
+
"value": { "type": "string", "default": "''" }
|
|
6244
|
+
},
|
|
6245
|
+
{
|
|
6246
|
+
"name": "form",
|
|
6247
|
+
"description": "Associates the control with a form by id. The form must be in the same document or shadow root.",
|
|
6248
|
+
"value": { "type": "string", "default": "''" }
|
|
6249
|
+
},
|
|
6240
6250
|
{
|
|
6241
6251
|
"name": "config",
|
|
6242
6252
|
"description": "The page state as a JSON string. Parsed on set; invalid JSON is ignored with a warning.",
|
|
@@ -6292,6 +6302,16 @@
|
|
|
6292
6302
|
],
|
|
6293
6303
|
"js": {
|
|
6294
6304
|
"properties": [
|
|
6305
|
+
{
|
|
6306
|
+
"name": "name",
|
|
6307
|
+
"description": "The name of the control, submitted as a name/value pair with form data.",
|
|
6308
|
+
"type": "string"
|
|
6309
|
+
},
|
|
6310
|
+
{
|
|
6311
|
+
"name": "form",
|
|
6312
|
+
"description": "Associates the control with a form by id. The form must be in the same document or shadow root.",
|
|
6313
|
+
"type": "string"
|
|
6314
|
+
},
|
|
6295
6315
|
{
|
|
6296
6316
|
"name": "config",
|
|
6297
6317
|
"description": "The page state as a JSON string. Parsed on set; invalid JSON is ignored with a warning.",
|
|
@@ -6324,6 +6344,25 @@
|
|
|
6324
6344
|
"description": "Replaces the page state wholesale (does not emit zn-page-change).",
|
|
6325
6345
|
"type": "PageState"
|
|
6326
6346
|
},
|
|
6347
|
+
{
|
|
6348
|
+
"name": "value",
|
|
6349
|
+
"description": "Replaces the page state from a JSON string (does not emit zn-page-change).",
|
|
6350
|
+
"type": "string"
|
|
6351
|
+
},
|
|
6352
|
+
{
|
|
6353
|
+
"name": "defaultValue",
|
|
6354
|
+
"description": "The serialised state of the last externally loaded page — restored on form reset."
|
|
6355
|
+
},
|
|
6356
|
+
{
|
|
6357
|
+
"name": "validity",
|
|
6358
|
+
"description": "Gets the validity state object.",
|
|
6359
|
+
"type": "ValidityState"
|
|
6360
|
+
},
|
|
6361
|
+
{
|
|
6362
|
+
"name": "validationMessage",
|
|
6363
|
+
"description": "Gets the validation message.",
|
|
6364
|
+
"type": "string"
|
|
6365
|
+
},
|
|
6327
6366
|
{
|
|
6328
6367
|
"name": "restoreAutoSave",
|
|
6329
6368
|
"description": "Load the auto-saved page, if one exists within the 1-day TTL."
|
|
@@ -7589,6 +7628,114 @@
|
|
|
7589
7628
|
]
|
|
7590
7629
|
}
|
|
7591
7630
|
},
|
|
7631
|
+
{
|
|
7632
|
+
"name": "zn-remarkd-editor",
|
|
7633
|
+
"description": "A Notion-style block editor for remarkd content. Blocks render inline; click one to edit its source.\n---\n\n\n### **Events:**\n - **zn-input** - Emitted on each keystroke while editing a block.\n- **zn-change** - Emitted when a block edit is committed and the value changes.\n\n### **Methods:**\n - **focus()** - Starts editing the first block, or a new block if the document is empty.\n- **blur()** - Commits any in-progress block edit.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **toolbar** - The always-visible block-insert toolbar.\n- **block** - A rendered block wrapper.\n- **rendered** - The rendered remarkd output of a block.\n- **input** - The textarea shown while editing a block.\n- **slash-menu** - The context menu opened by typing \"/\" in a block.\n- **image-controls** - The caption / alignment / size panel shown when an image block is clicked.",
|
|
7634
|
+
"doc-url": "",
|
|
7635
|
+
"attributes": [
|
|
7636
|
+
{
|
|
7637
|
+
"name": "name",
|
|
7638
|
+
"description": "The name of the control, submitted as part of form data.",
|
|
7639
|
+
"value": { "type": "string", "default": "''" }
|
|
7640
|
+
},
|
|
7641
|
+
{
|
|
7642
|
+
"name": "value",
|
|
7643
|
+
"description": "The current remarkd source.",
|
|
7644
|
+
"value": { "type": "string", "default": "''" }
|
|
7645
|
+
},
|
|
7646
|
+
{
|
|
7647
|
+
"name": "placeholder",
|
|
7648
|
+
"description": "Placeholder shown when the document is empty.",
|
|
7649
|
+
"value": { "type": "string", "default": "'Type something…'" }
|
|
7650
|
+
},
|
|
7651
|
+
{
|
|
7652
|
+
"name": "attachment-url",
|
|
7653
|
+
"description": "Endpoint for image uploads — required for image support. Posting the file\nmetadata here must return `{uploadPath, uploadUrl}`; the file is then PUT\nto `uploadUrl` and the returned `uploadPath` is embedded as the image URL.",
|
|
7654
|
+
"value": { "type": "string", "default": "''" }
|
|
7655
|
+
},
|
|
7656
|
+
{
|
|
7657
|
+
"name": "required",
|
|
7658
|
+
"description": "Makes the editor required for form submission.",
|
|
7659
|
+
"value": { "type": "boolean", "default": "false" }
|
|
7660
|
+
},
|
|
7661
|
+
{
|
|
7662
|
+
"name": "readonly",
|
|
7663
|
+
"description": "Makes the editor read-only.",
|
|
7664
|
+
"value": { "type": "boolean", "default": "false" }
|
|
7665
|
+
},
|
|
7666
|
+
{
|
|
7667
|
+
"name": "disabled",
|
|
7668
|
+
"description": "Disables the editor.",
|
|
7669
|
+
"value": { "type": "boolean", "default": "false" }
|
|
7670
|
+
}
|
|
7671
|
+
],
|
|
7672
|
+
"events": [
|
|
7673
|
+
{
|
|
7674
|
+
"name": "zn-input",
|
|
7675
|
+
"description": "Emitted on each keystroke while editing a block."
|
|
7676
|
+
},
|
|
7677
|
+
{
|
|
7678
|
+
"name": "zn-change",
|
|
7679
|
+
"description": "Emitted when a block edit is committed and the value changes."
|
|
7680
|
+
}
|
|
7681
|
+
],
|
|
7682
|
+
"js": {
|
|
7683
|
+
"properties": [
|
|
7684
|
+
{
|
|
7685
|
+
"name": "name",
|
|
7686
|
+
"description": "The name of the control, submitted as part of form data.",
|
|
7687
|
+
"type": "string"
|
|
7688
|
+
},
|
|
7689
|
+
{
|
|
7690
|
+
"name": "value",
|
|
7691
|
+
"description": "The current remarkd source.",
|
|
7692
|
+
"type": "string"
|
|
7693
|
+
},
|
|
7694
|
+
{
|
|
7695
|
+
"name": "defaultValue",
|
|
7696
|
+
"description": "The default value — used when resetting the form.",
|
|
7697
|
+
"type": "string"
|
|
7698
|
+
},
|
|
7699
|
+
{
|
|
7700
|
+
"name": "placeholder",
|
|
7701
|
+
"description": "Placeholder shown when the document is empty.",
|
|
7702
|
+
"type": "string"
|
|
7703
|
+
},
|
|
7704
|
+
{
|
|
7705
|
+
"name": "attachmentUrl",
|
|
7706
|
+
"description": "Endpoint for image uploads — required for image support. Posting the file\nmetadata here must return `{uploadPath, uploadUrl}`; the file is then PUT\nto `uploadUrl` and the returned `uploadPath` is embedded as the image URL.",
|
|
7707
|
+
"type": "string"
|
|
7708
|
+
},
|
|
7709
|
+
{
|
|
7710
|
+
"name": "required",
|
|
7711
|
+
"description": "Makes the editor required for form submission.",
|
|
7712
|
+
"type": "boolean"
|
|
7713
|
+
},
|
|
7714
|
+
{
|
|
7715
|
+
"name": "readonly",
|
|
7716
|
+
"description": "Makes the editor read-only.",
|
|
7717
|
+
"type": "boolean"
|
|
7718
|
+
},
|
|
7719
|
+
{
|
|
7720
|
+
"name": "disabled",
|
|
7721
|
+
"description": "Disables the editor.",
|
|
7722
|
+
"type": "boolean"
|
|
7723
|
+
},
|
|
7724
|
+
{ "name": "validity", "type": "ValidityState" },
|
|
7725
|
+
{ "name": "validationMessage", "type": "string" }
|
|
7726
|
+
],
|
|
7727
|
+
"events": [
|
|
7728
|
+
{
|
|
7729
|
+
"name": "zn-input",
|
|
7730
|
+
"description": "Emitted on each keystroke while editing a block."
|
|
7731
|
+
},
|
|
7732
|
+
{
|
|
7733
|
+
"name": "zn-change",
|
|
7734
|
+
"description": "Emitted when a block edit is committed and the value changes."
|
|
7735
|
+
}
|
|
7736
|
+
]
|
|
7737
|
+
}
|
|
7738
|
+
},
|
|
7592
7739
|
{
|
|
7593
7740
|
"name": "zn-reveal",
|
|
7594
7741
|
"description": "Short summary of the component's intended use.\n---\n\n\n### **Events:**\n - **zn-event-name** - Emitted as an example.\n\n### **Slots:**\n - _default_ - The default slot.\n- **example** - An example slot.\n\n### **CSS Properties:**\n - **--example** - An example CSS custom property. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
|
package/dist/zn.d.ts
CHANGED
|
@@ -3120,6 +3120,7 @@ declare module "components/query-builder/query-builder.component" {
|
|
|
3120
3120
|
name: string;
|
|
3121
3121
|
value: PropertyKey;
|
|
3122
3122
|
showValues: string[];
|
|
3123
|
+
private get _usedFilterIds();
|
|
3123
3124
|
get validationMessage(): string;
|
|
3124
3125
|
get validity(): ValidityState;
|
|
3125
3126
|
protected firstUpdated(_changedProperties: PropertyValues): void;
|
|
@@ -7057,6 +7058,8 @@ declare module "components/file/file.component" {
|
|
|
7057
7058
|
'zn-dialog': typeof ZnDialog;
|
|
7058
7059
|
};
|
|
7059
7060
|
private readonly formControlController;
|
|
7061
|
+
/** Set when the user clears the control; reset when a file is chosen. */
|
|
7062
|
+
private clearedByUser;
|
|
7060
7063
|
private readonly hasSlotController;
|
|
7061
7064
|
private readonly localize;
|
|
7062
7065
|
private userIsDragging;
|
|
@@ -8695,6 +8698,165 @@ declare module "components/markdown-editor/index" {
|
|
|
8695
8698
|
}
|
|
8696
8699
|
}
|
|
8697
8700
|
}
|
|
8701
|
+
declare module "components/remarkd-editor/remarkd-editor.component" {
|
|
8702
|
+
import { type CSSResultGroup, type PropertyValues } from 'lit';
|
|
8703
|
+
import ZincElement from "internal/zinc-element";
|
|
8704
|
+
import type { ZincFormControl } from "internal/zinc-element";
|
|
8705
|
+
/**
|
|
8706
|
+
* @summary A Notion-style block editor for remarkd content. Blocks render inline; click one to edit its source.
|
|
8707
|
+
* @documentation https://zinc.style/components/remarkd-editor
|
|
8708
|
+
* @status experimental
|
|
8709
|
+
* @since 1.0
|
|
8710
|
+
*
|
|
8711
|
+
* @dependency zn-button
|
|
8712
|
+
* @dependency zn-button-group
|
|
8713
|
+
* @dependency zn-icon
|
|
8714
|
+
* @dependency zn-file
|
|
8715
|
+
*
|
|
8716
|
+
* @event zn-input - Emitted on each keystroke while editing a block.
|
|
8717
|
+
* @event zn-change - Emitted when a block edit is committed and the value changes.
|
|
8718
|
+
*
|
|
8719
|
+
* @csspart base - The component's base wrapper.
|
|
8720
|
+
* @csspart toolbar - The always-visible block-insert toolbar.
|
|
8721
|
+
* @csspart block - A rendered block wrapper.
|
|
8722
|
+
* @csspart rendered - The rendered remarkd output of a block.
|
|
8723
|
+
* @csspart input - The textarea shown while editing a block.
|
|
8724
|
+
* @csspart slash-menu - The context menu opened by typing "/" in a block.
|
|
8725
|
+
* @csspart image-controls - The caption / alignment / size panel shown when an image block is clicked.
|
|
8726
|
+
*/
|
|
8727
|
+
export default class ZnRemarkdEditor extends ZincElement implements ZincFormControl {
|
|
8728
|
+
static styles: CSSResultGroup;
|
|
8729
|
+
private readonly formControlController;
|
|
8730
|
+
private editingDraft;
|
|
8731
|
+
private suppressValueSync;
|
|
8732
|
+
private suppressBlurCommit;
|
|
8733
|
+
private validationInput;
|
|
8734
|
+
private blocks;
|
|
8735
|
+
private editingIndex;
|
|
8736
|
+
private slashMenuOpen;
|
|
8737
|
+
private slashQuery;
|
|
8738
|
+
private slashActiveIndex;
|
|
8739
|
+
private imagePickerIndex;
|
|
8740
|
+
private imageEdit;
|
|
8741
|
+
private dropIndicator;
|
|
8742
|
+
private dragIndex;
|
|
8743
|
+
private editShell;
|
|
8744
|
+
private pendingDragHandle;
|
|
8745
|
+
private dragStartX;
|
|
8746
|
+
private dragStartY;
|
|
8747
|
+
private dragGhost;
|
|
8748
|
+
/** The name of the control, submitted as part of form data. */
|
|
8749
|
+
name: string;
|
|
8750
|
+
/** The current remarkd source. */
|
|
8751
|
+
value: string;
|
|
8752
|
+
/** The default value — used when resetting the form. */
|
|
8753
|
+
defaultValue: string;
|
|
8754
|
+
/** Placeholder shown when the document is empty. */
|
|
8755
|
+
placeholder: string;
|
|
8756
|
+
/**
|
|
8757
|
+
* Endpoint for image uploads — required for image support. Posting the file
|
|
8758
|
+
* metadata here must return `{uploadPath, uploadUrl}`; the file is then PUT
|
|
8759
|
+
* to `uploadUrl` and the returned `uploadPath` is embedded as the image URL.
|
|
8760
|
+
*/
|
|
8761
|
+
attachmentUrl: string;
|
|
8762
|
+
/** Makes the editor required for form submission. */
|
|
8763
|
+
required: boolean;
|
|
8764
|
+
/** Makes the editor read-only. */
|
|
8765
|
+
readonly: boolean;
|
|
8766
|
+
/** Disables the editor. */
|
|
8767
|
+
disabled: boolean;
|
|
8768
|
+
get validity(): ValidityState;
|
|
8769
|
+
get validationMessage(): string;
|
|
8770
|
+
checkValidity(): boolean;
|
|
8771
|
+
getForm(): HTMLFormElement | null;
|
|
8772
|
+
reportValidity(): boolean;
|
|
8773
|
+
setCustomValidity(message: string): void;
|
|
8774
|
+
/** Starts editing the first block, or a new block if the document is empty. */
|
|
8775
|
+
focus(): void;
|
|
8776
|
+
/** Commits any in-progress block edit. */
|
|
8777
|
+
blur(): void;
|
|
8778
|
+
protected firstUpdated(_changedProperties: PropertyValues): void;
|
|
8779
|
+
disconnectedCallback(): void;
|
|
8780
|
+
handleValueChange(): void;
|
|
8781
|
+
/**
|
|
8782
|
+
* Splits remarkd source into blocks on blank lines, keeping fenced /
|
|
8783
|
+
* delimited containers (``` ==== !!!! .... ----) as single blocks.
|
|
8784
|
+
*/
|
|
8785
|
+
private splitBlocks;
|
|
8786
|
+
private fenceMarker;
|
|
8787
|
+
private closesFence;
|
|
8788
|
+
private updateBlocks;
|
|
8789
|
+
private handleRenderedClick;
|
|
8790
|
+
/** Parses a block that is purely an image (with optional caption/align lines). */
|
|
8791
|
+
private parseImageBlock;
|
|
8792
|
+
private serializeImageBlock;
|
|
8793
|
+
private toggleCheckbox;
|
|
8794
|
+
private startEdit;
|
|
8795
|
+
private updateImageEdit;
|
|
8796
|
+
private saveImageEdit;
|
|
8797
|
+
private closeImageEdit;
|
|
8798
|
+
private deleteImageBlock;
|
|
8799
|
+
private editImageSource;
|
|
8800
|
+
private handleImageControlsKeydown;
|
|
8801
|
+
/**
|
|
8802
|
+
* The remarkd chrome the editing block should keep, derived from its first
|
|
8803
|
+
* line — so a NOTE still looks like a note while its source is edited.
|
|
8804
|
+
*/
|
|
8805
|
+
private computeEditShell;
|
|
8806
|
+
private focusInput;
|
|
8807
|
+
private addBlockAt;
|
|
8808
|
+
private deleteBlock;
|
|
8809
|
+
/** Inserts a draft block — committed (or dropped, if left empty) on blur. */
|
|
8810
|
+
private insertDraftBlock;
|
|
8811
|
+
/**
|
|
8812
|
+
* Blur handler for the editing textarea. Re-renders that replace the
|
|
8813
|
+
* focused textarea (e.g. Shift+Enter committing and opening the next
|
|
8814
|
+
* block) fire blur mid-transition — `suppressBlurCommit` masks those.
|
|
8815
|
+
*/
|
|
8816
|
+
private handleEditBlur;
|
|
8817
|
+
/** Commits the in-progress edit; returns the index after the committed parts. */
|
|
8818
|
+
private commitEdit;
|
|
8819
|
+
private get filteredSlashItems();
|
|
8820
|
+
private handleDraftInput;
|
|
8821
|
+
private handleEditKeydown;
|
|
8822
|
+
private applySlashItem;
|
|
8823
|
+
private handleEditPaste;
|
|
8824
|
+
private handleDragOver;
|
|
8825
|
+
private handleDrop;
|
|
8826
|
+
/** The insertion index a drop at `y` maps to, from the rendered block positions. */
|
|
8827
|
+
private insertionIndexFromY;
|
|
8828
|
+
private handleHandlePointerDown;
|
|
8829
|
+
private handleDragPointerMove;
|
|
8830
|
+
private handleDragPointerUp;
|
|
8831
|
+
private cancelDrag;
|
|
8832
|
+
private createDragGhost;
|
|
8833
|
+
private moveDragGhost;
|
|
8834
|
+
private pickImage;
|
|
8835
|
+
private closeImagePicker;
|
|
8836
|
+
private handleImagePicked;
|
|
8837
|
+
private insertImage;
|
|
8838
|
+
private uploadImage;
|
|
8839
|
+
private autosize;
|
|
8840
|
+
private handleToolbarInsert;
|
|
8841
|
+
private renderSlashMenu;
|
|
8842
|
+
private renderImageControls;
|
|
8843
|
+
private renderBlock;
|
|
8844
|
+
render(): import("lit-html").TemplateResult<1>;
|
|
8845
|
+
/** The block views, with the inline image picker spliced in when active. */
|
|
8846
|
+
private renderBody;
|
|
8847
|
+
private renderImagePicker;
|
|
8848
|
+
}
|
|
8849
|
+
}
|
|
8850
|
+
declare module "components/remarkd-editor/index" {
|
|
8851
|
+
import ZnRemarkdEditor from "components/remarkd-editor/remarkd-editor.component";
|
|
8852
|
+
export * from "components/remarkd-editor/remarkd-editor.component";
|
|
8853
|
+
export default ZnRemarkdEditor;
|
|
8854
|
+
global {
|
|
8855
|
+
interface HTMLElementTagNameMap {
|
|
8856
|
+
'zn-remarkd-editor': ZnRemarkdEditor;
|
|
8857
|
+
}
|
|
8858
|
+
}
|
|
8859
|
+
}
|
|
8698
8860
|
declare module "components/flow-builder/flow.types" {
|
|
8699
8861
|
import type { TemplateResult } from 'lit';
|
|
8700
8862
|
/** Which steps-panel tab a node type appears under. */
|
|
@@ -10001,6 +10163,11 @@ declare module "components/page-builder/page-builder.component" {
|
|
|
10001
10163
|
'zn-page-palette-item': typeof ZnPagePaletteItem;
|
|
10002
10164
|
'zn-page-section-card': typeof ZnPageSectionCard;
|
|
10003
10165
|
};
|
|
10166
|
+
private readonly formControlController;
|
|
10167
|
+
/** The name of the control, submitted as a name/value pair with form data. */
|
|
10168
|
+
name: string;
|
|
10169
|
+
/** Associates the control with a form by id. The form must be in the same document or shadow root. */
|
|
10170
|
+
form: string;
|
|
10004
10171
|
/** The page state as a JSON string. Parsed on set; invalid JSON is ignored with a warning. */
|
|
10005
10172
|
config: string;
|
|
10006
10173
|
heading: string;
|
|
@@ -10037,6 +10204,24 @@ declare module "components/page-builder/page-builder.component" {
|
|
|
10037
10204
|
get state(): PageState;
|
|
10038
10205
|
/** Replaces the page state wholesale (does not emit zn-page-change). */
|
|
10039
10206
|
set state(next: PageState);
|
|
10207
|
+
/** The page state as a JSON string — the value submitted with form data. */
|
|
10208
|
+
get value(): string;
|
|
10209
|
+
/** Replaces the page state from a JSON string (does not emit zn-page-change). */
|
|
10210
|
+
set value(next: string);
|
|
10211
|
+
/** The serialised state of the last externally loaded page — restored on form reset. */
|
|
10212
|
+
defaultValue: string;
|
|
10213
|
+
/** Gets the validity state object. */
|
|
10214
|
+
get validity(): ValidityState;
|
|
10215
|
+
/** Gets the validation message. */
|
|
10216
|
+
get validationMessage(): string;
|
|
10217
|
+
/** Checks for validity but does not show a validation message. */
|
|
10218
|
+
checkValidity(): boolean;
|
|
10219
|
+
/** Gets the associated form, if one exists. */
|
|
10220
|
+
getForm(): HTMLFormElement | null;
|
|
10221
|
+
/** Checks for validity and shows the browser's validation message if the control is invalid. */
|
|
10222
|
+
reportValidity(): boolean;
|
|
10223
|
+
/** Sets a custom validation message. Pass an empty string to restore validity. */
|
|
10224
|
+
setCustomValidity(_message?: string): void;
|
|
10040
10225
|
handleConfigChange(): void;
|
|
10041
10226
|
handleSectionTypesChange(): void;
|
|
10042
10227
|
registerSectionType(type: PageSectionType): this;
|
|
@@ -10078,6 +10263,7 @@ declare module "components/page-builder/page-builder.component" {
|
|
|
10078
10263
|
*/
|
|
10079
10264
|
private _offerRestoreIfNewer;
|
|
10080
10265
|
protected willUpdate(changed: PropertyValues): void;
|
|
10266
|
+
protected firstUpdated(changed: PropertyValues): void;
|
|
10081
10267
|
private _typeFromTemplate;
|
|
10082
10268
|
private _registerSlottedTemplates;
|
|
10083
10269
|
/** Normalises and installs an externally provided state; resets selection. */
|
|
@@ -10528,6 +10714,7 @@ declare module "zinc" {
|
|
|
10528
10714
|
export { default as OptGroup } from "components/opt-group/index";
|
|
10529
10715
|
export { default as PriorityList } from "components/priority-list/index";
|
|
10530
10716
|
export { default as MarkdownEditor } from "components/markdown-editor/index";
|
|
10717
|
+
export { default as RemarkdEditor } from "components/remarkd-editor/index";
|
|
10531
10718
|
export { default as FlowBuilder } from "components/flow-builder/index";
|
|
10532
10719
|
export { default as FlowSteps } from "components/flow-builder/modules/flow-steps/index";
|
|
10533
10720
|
export { default as FlowStepGroup } from "components/flow-builder/modules/flow-step-group/index";
|