1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
|
/**
* EditorJS block tool for embedding web components with props.
*
* Saved data format:
* {
* "name": "site-greeting",
* "props": { "name": "visitor", "theme": "dark" }
* }
*
* Renders in HTML as: <site-greeting name="visitor" theme="dark"></site-greeting>
*/
export default class ComponentTool {
static get toolbox() {
return {
title: 'Component',
icon: '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path stroke="currentColor" stroke-width="2" stroke-linecap="round" d="M7 8l-4 4 4 4M17 8l4 4-4 4M14 4l-4 16"/></svg>',
};
}
constructor({ data }) {
this.data = {
name: data.name || '',
props: data.props || {},
};
this.wrapper = null;
}
render() {
this.wrapper = document.createElement('div');
this.wrapper.classList.add('component-tool');
this._renderUI();
return this.wrapper;
}
_renderUI() {
this.wrapper.innerHTML = '';
// Component name input
const nameLabel = document.createElement('label');
nameLabel.textContent = 'Component tag name';
nameLabel.style.cssText = 'display:block;font-size:12px;color:#888;margin-bottom:2px;';
const nameInput = document.createElement('input');
nameInput.type = 'text';
nameInput.placeholder = 'e.g. site-greeting';
nameInput.value = this.data.name;
nameInput.style.cssText = 'width:100%;padding:6px 8px;border:1px solid #ccc;border-radius:4px;font-family:monospace;margin-bottom:8px;';
nameInput.addEventListener('input', () => { this.data.name = nameInput.value; });
// Props section
const propsLabel = document.createElement('label');
propsLabel.textContent = 'Props';
propsLabel.style.cssText = 'display:block;font-size:12px;color:#888;margin-bottom:2px;';
const propsContainer = document.createElement('div');
propsContainer.classList.add('props-container');
const addBtn = document.createElement('button');
addBtn.type = 'button';
addBtn.textContent = '+ Add prop';
addBtn.style.cssText = 'padding:4px 10px;font-size:12px;border:1px solid #ccc;border-radius:4px;background:#f5f5f5;cursor:pointer;margin-top:4px;';
addBtn.addEventListener('click', () => {
this.data.props[''] = '';
this._renderProps(propsContainer);
});
this.wrapper.append(nameLabel, nameInput, propsLabel, propsContainer, addBtn);
this._renderProps(propsContainer);
}
_renderProps(container) {
container.innerHTML = '';
const entries = Object.entries(this.data.props);
entries.forEach(([key, value], i) => {
const row = document.createElement('div');
row.style.cssText = 'display:flex;gap:4px;margin-bottom:4px;';
const kInput = document.createElement('input');
kInput.type = 'text';
kInput.placeholder = 'key';
kInput.value = key;
kInput.style.cssText = 'flex:1;padding:4px 6px;border:1px solid #ccc;border-radius:4px;font-family:monospace;';
const vInput = document.createElement('input');
vInput.type = 'text';
vInput.placeholder = 'value';
vInput.value = value;
vInput.style.cssText = 'flex:2;padding:4px 6px;border:1px solid #ccc;border-radius:4px;';
const removeBtn = document.createElement('button');
removeBtn.type = 'button';
removeBtn.textContent = '×';
removeBtn.style.cssText = 'padding:4px 8px;border:1px solid #ccc;border-radius:4px;background:#f5f5f5;cursor:pointer;';
// Rebuild props object on change
const updateProps = () => {
const newProps = {};
container.querySelectorAll('div').forEach((r) => {
const inputs = r.querySelectorAll('input');
if (inputs[0] && inputs[0].value) {
newProps[inputs[0].value] = inputs[1] ? inputs[1].value : '';
}
});
this.data.props = newProps;
};
kInput.addEventListener('input', updateProps);
vInput.addEventListener('input', updateProps);
removeBtn.addEventListener('click', () => {
row.remove();
updateProps();
});
row.append(kInput, vInput, removeBtn);
container.append(row);
});
}
save() {
// Clean out empty-key props
const cleaned = {};
for (const [k, v] of Object.entries(this.data.props)) {
if (k.trim()) cleaned[k.trim()] = v;
}
return {
name: this.data.name.trim(),
props: cleaned,
};
}
validate(savedData) {
return savedData.name.trim() !== '';
}
}
|
