@kubex/zinc 1.1.63 → 1.1.64

package/docs/pages/components/remarkd-editor.md

@@ -0,0 +1,103 @@
+---
+meta:
+  title: Remarkd Editor
+  description: A Notion-style block editor for remarkd content — blocks render inline and are edited in place.
+layout: component
+---
+
+`zn-remarkd-editor` is a Notion-style editor for
+[remarkd](https://github.com/packaged/remarkd) content. The document is a list
+of blocks rendered inline with remarkd — there is no separate preview. Click a
+block to edit its raw remarkd source in place; it re-renders when you click
+away (or press Escape / Ctrl+Enter). The `value` is always plain remarkd
+source, submitted with the surrounding form.
+
+```html:preview
+<zn-remarkd-editor
+  name="content"
+  value="# Product Guide
+
+This is a paragraph with **strong text**, __emphasis__, and a [link](https://example.com).
+
+- [ ] Draft the guide
+- [x] Review the output
+
+NOTE: Click any block to edit its source."
+></zn-remarkd-editor>
+```
+
+## Examples
+
+### Adding and Moving Blocks
+
+Hover a block to reveal its gutter actions: add a block below it, or grab the
+handle to drag the block somewhere else in the document. Clicking the empty
+area at the end of the document starts a new block. A block committed empty
+is removed.
+
+```html:preview
+<zn-remarkd-editor
+  name="content"
+  value="Hover me to see the block actions."
+></zn-remarkd-editor>
+```
+
+### Images
+
+Adding an image opens a dialog. With `attachment-url` set it contains a
+`zn-file` drop area; the file's metadata is POSTed to the endpoint, which must
+respond with `{uploadPath, uploadUrl}`; the file is then PUT to `uploadUrl`
+and `uploadPath` is inserted as an image block. Without `attachment-url` the
+dialog asks for an image URL instead. Dropping an image file straight onto the
+editor uploads it directly.
+
+```html
+<zn-remarkd-editor name="content" attachment-url="/upload"></zn-remarkd-editor>
+```
+
+### Remarkd Blocks
+
+Remarkd's block syntax — hints, containers, code fences — renders with the
+official remarkd styles. Fenced content stays a single block, blank lines and
+all.
+
+````html:preview
+<zn-remarkd-editor name="content" value="TIP: Hint blocks are remarkd-specific.
+
+====
+An example **container** block.
+====
+
+```
+a code fence
+
+with a blank line inside
+```"
+></zn-remarkd-editor>
+````
+
+### Form Integration
+
+`zn-remarkd-editor` is a [form control](/getting-started/form-controls); its
+remarkd source is submitted under `name`, and `required` is supported.
+
+```html:preview
+<form class="remarkd-editor-form">
+  <zn-remarkd-editor name="content" required value="Edit me, then submit."></zn-remarkd-editor>
+  <br />
+  <zn-button type="submit" color="success">Submit</zn-button>
+</form>
+
+<script type="module">
+  const form = document.querySelector('.remarkd-editor-form');
+
+  await customElements.whenDefined('zn-button');
+  await customElements.whenDefined('zn-remarkd-editor');
+
+  form.addEventListener('submit', (e) => {
+    e.preventDefault();
+    const data = Object.fromEntries(new FormData(form));
+    alert('Submitted!\n\n' + JSON.stringify(data, null, 2));
+  });
+</script>
+```

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kubex/zinc",
-  "version": "1.1.63",
+  "version": "1.1.64",
   "description": "A collection of web components for building web applications based off of @shoelace-style/Shoelace",
   "keywords": [
     "web components",
@@ -55,7 +55,8 @@
     "lit": "^3.3.3",
     "lucide": "^1.17.0",
     "marked": "^18.0.2",
-    "quill": "^2.0.3"
+    "quill": "^2.0.3",
+    "remarkd-js": "github:packaged/remarkd#fc482a4260740e0d61ab1cd50b056545fe195d94"
   },
   "devDependencies": {
     "@custom-elements-manifest/analyzer": "^0.10.3",

package/src/components/file/file.component.ts

@@ -76,9 +76,17 @@ export default class ZnFile extends ZincElement implements ZincFormControl {
 
   private readonly formControlController = new FormControlController(this, {
     assumeInteractionOn: ['zn-change'],
-    value: (el: ZnFile) => el.files
+    // An explicitly cleared control submits an empty value so the server can
+    // remove the stored upload; an untouched empty control submits nothing.
+    value: (el: ZnFile) => {
+      if (el.files?.length) return el.files;
+      return el.clearedByUser ? '' : undefined;
+    }
   })
 
+  /** Set when the user clears the control; reset when a file is chosen. */
+  private clearedByUser = false;
+
   private readonly hasSlotController = new HasSlotController(this, 'help-text', 'label');
 
   private readonly localize = new LocalizeController(this);
@@ -110,6 +118,9 @@ export default class ZnFile extends ZincElement implements ZincFormControl {
   set files(v: FileList | null) {
     if (this.input) {
       this.input.files = v;
+      if (v?.length) {
+        this.clearedByUser = false;
+      }
       this.updatePreview();
     }
   }
@@ -481,6 +492,9 @@ export default class ZnFile extends ZincElement implements ZincFormControl {
     const dataTransfer = new DataTransfer();
     files.forEach(f => dataTransfer.items.add(f));
     this.files = dataTransfer.files;
+    if (!dataTransfer.files.length) {
+      this.clearedByUser = true;
+    }
     this.input.dispatchEvent(new Event('change'));
   }
 
@@ -501,6 +515,7 @@ export default class ZnFile extends ZincElement implements ZincFormControl {
     if (!hadLocalFile) {
       this.src = '';
     }
+    this.clearedByUser = true;
     this.clearConfirmDialog?.hide();
     this.input.dispatchEvent(new Event('change'));
     this.emit('zn-clear');

package/src/components/query-builder/query-builder.component.ts

@@ -167,6 +167,10 @@ export default class ZnQueryBuilder extends ZincElement implements ZincFormContr
   }) showValues: string[] = [];
 
 
+  private get _usedFilterIds(): Set<string> {
+    return new Set([...this._selectedRules.values()].map(rule => rule.id));
+  }
+
   get validationMessage(): string {
     return '';
   }
@@ -196,7 +200,7 @@ export default class ZnQueryBuilder extends ZincElement implements ZincFormContr
                    size="medium"
                    placeholder="Select Filter"
                    @zn-change="${this._addRule}">
-          ${this.filters && this.filters.map(item => html`
+          ${this.filters && this.filters.filter(item => !this._usedFilterIds.has(item.id)).map(item => html`
             <zn-option value="${item.id}">
               ${item.name.charAt(0).toUpperCase() + item.name.slice(1)}
             </zn-option>`)}
@@ -227,6 +231,7 @@ export default class ZnQueryBuilder extends ZincElement implements ZincFormContr
 
     const filter: QueryBuilderItem | undefined = this.filters.find(item => item.id === id);
     if (filter === undefined) return;
+    if (this._usedFilterIds.has(filter.id)) return;
 
     const uniqueId = Math.random().toString(36).substring(7);
 
@@ -237,11 +242,12 @@ export default class ZnQueryBuilder extends ZincElement implements ZincFormContr
       value: ''
     });
 
+    const availableFilters = this.filters.filter(item => item.id === filter.id || !this._usedFilterIds.has(item.id));
     const select = html`
       <zn-select class="query-builder__key"
                  @zn-change="${(e: ZnChangeEvent) => this._changeRule(uniqueId, e)}"
                  value="${filter?.id}">
-        ${this.filters.map((item: QueryBuilderItem) => {
+        ${availableFilters.map((item: QueryBuilderItem) => {
           return html`
             <zn-option value="${item.id}">
               ${item.name.charAt(0).toUpperCase() + item.name.slice(1)}
@@ -338,7 +344,7 @@ export default class ZnQueryBuilder extends ZincElement implements ZincFormContr
         break;
       }
       case 'dateTime': {
-        input = this._createDateInput(uniqueId, true , filter.dateSubmitFormat);
+        input = this._createDateInput(uniqueId, true, filter.dateSubmitFormat);
         break;
       }
       default: {
@@ -401,9 +407,9 @@ export default class ZnQueryBuilder extends ZincElement implements ZincFormContr
         ?time-picker="${hasTime}"
         class="query-builder__value"
         @zn-change="${(e: ZnChangeEvent) => this._updateDateValue(uniqueId, e, submitFormat)}"
-        >
+      >
       </zn-datepicker>
-      `;
+    `;
     return litToHTML<ZnDatepicker>(input);
   }
 
@@ -451,7 +457,9 @@ export default class ZnQueryBuilder extends ZincElement implements ZincFormContr
     this._handleChange();
   }
 
-  private _updateDateValue(id: string, event: Event | { target: ZnDatepicker | HTMLDivElement }, submitFormat: QueryBuilderDateSubmitFormat = 'legacy') {
+  private _updateDateValue(id: string, event: Event | {
+    target: ZnDatepicker | HTMLDivElement
+  }, submitFormat: QueryBuilderDateSubmitFormat = 'legacy') {
     const filter = this._selectedRules.get(id);
     if (!filter) return;
 

package/src/components/remarkd-editor/index.ts

@@ -0,0 +1,12 @@
+import ZnRemarkdEditor from './remarkd-editor.component';
+
+export * from './remarkd-editor.component';
+export default ZnRemarkdEditor;
+
+ZnRemarkdEditor.define('zn-remarkd-editor');
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'zn-remarkd-editor': ZnRemarkdEditor;
+  }
+}