@fusion.dev/helix-docs 0.162.1 → 0.164.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/content/metrics.mdx +222 -222
- package/content/sandbox.mdx +62 -0
- package/dist/sources.generated.js +284 -222
- package/package.json +9 -9
package/content/sandbox.mdx
CHANGED
|
@@ -73,6 +73,59 @@ first edit.
|
|
|
73
73
|
Cancel `helix-before-edit` to refuse an edit. The pane keeps its text, and the
|
|
74
74
|
preview does not receive the refused one.
|
|
75
75
|
|
|
76
|
+
Several source panes are files. The sandbox shows one at a time under a row of
|
|
77
|
+
tabs, each named by the pane's `label` or, without one, its `name`, and `file`
|
|
78
|
+
holds the `name` of the pane shown. The arrow keys move between the tabs, and
|
|
79
|
+
`Home` and `End` go to the first and the last. Choosing a tab sends
|
|
80
|
+
`helix-before-change` with the pane's `name`, which you can cancel, and
|
|
81
|
+
`change` once `file` holds it. The panes not shown carry `hidden`.
|
|
82
|
+
|
|
83
|
+
## Your own editor
|
|
84
|
+
|
|
85
|
+
Any element can be the source pane. Put it in the `source` slot, give it a
|
|
86
|
+
`name`, and dispatch `helix-before-edit` with its text on each change, bubbling,
|
|
87
|
+
as `helix-sandbox-source` does. The sandbox reads its `value` to seed the
|
|
88
|
+
preview, and `helix-caret` from it fills the status bar's position. A wrapper
|
|
89
|
+
around CodeMirror:
|
|
90
|
+
|
|
91
|
+
```ts
|
|
92
|
+
import { HelixBeforeEditEvent } from '@fusion.dev/helix'
|
|
93
|
+
import { EditorView, basicSetup } from 'codemirror'
|
|
94
|
+
|
|
95
|
+
class CodeEditor extends HTMLElement {
|
|
96
|
+
name = this.getAttribute('name') ?? 'html'
|
|
97
|
+
value = this.getAttribute('value') ?? ''
|
|
98
|
+
|
|
99
|
+
connectedCallback() {
|
|
100
|
+
new EditorView({
|
|
101
|
+
doc: this.value,
|
|
102
|
+
extensions: [
|
|
103
|
+
basicSetup,
|
|
104
|
+
EditorView.updateListener.of((update) => {
|
|
105
|
+
if (update.docChanged) {
|
|
106
|
+
this.value = update.state.doc.toString()
|
|
107
|
+
this.dispatchEvent(new HelixBeforeEditEvent({ value: this.value }))
|
|
108
|
+
}
|
|
109
|
+
}),
|
|
110
|
+
],
|
|
111
|
+
parent: this,
|
|
112
|
+
})
|
|
113
|
+
}
|
|
114
|
+
}
|
|
115
|
+
customElements.define('code-editor', CodeEditor)
|
|
116
|
+
```
|
|
117
|
+
|
|
118
|
+
```html
|
|
119
|
+
<helix-sandbox>
|
|
120
|
+
<code-editor
|
|
121
|
+
name="html"
|
|
122
|
+
slot="source"
|
|
123
|
+
value="<p>Hello</p>"
|
|
124
|
+
></code-editor>
|
|
125
|
+
<helix-sandbox-preview slot="preview"></helix-sandbox-preview>
|
|
126
|
+
</helix-sandbox>
|
|
127
|
+
```
|
|
128
|
+
|
|
76
129
|
In a source pane, Tab inserts two spaces. Shift+Tab moves focus back, and
|
|
77
130
|
Escape then Tab moves it forward. The field's description says this to a
|
|
78
131
|
screen reader.
|
|
@@ -86,6 +139,15 @@ Set `controls` on `helix-sandbox-terminal` for a clear button and a level
|
|
|
86
139
|
filter above the log. Without them, `clear()` empties the log, and `level`
|
|
87
140
|
hides the quieter lines.
|
|
88
141
|
|
|
142
|
+
Set `controls` on `helix-sandbox-preview` for a reload button and a button that
|
|
143
|
+
opens the example in a new tab, in the preview's corner. Without them,
|
|
144
|
+
`reload()` and `open()` do the same. The tab runs the example in a frame
|
|
145
|
+
sandboxed as the preview's own is.
|
|
146
|
+
|
|
147
|
+
An error the example throws and does not catch shows over the preview, in its
|
|
148
|
+
`error` part, until the next source is sent. Hide the part where you draw your
|
|
149
|
+
own message from `:state(failed)`.
|
|
150
|
+
|
|
89
151
|
## The frame document
|
|
90
152
|
|
|
91
153
|
`helix-sandbox-preview` loads `src` into a sandboxed frame. You provide that
|