tetst (ccdbfdaf) · Commits · jan.koester / blogi

editor/html/css/editor.css

+103 −1

Original line number	Diff line number	Diff line
		@@ -1586,10 +1586,32 @@ dialog label {
		min-height: 0;
		}

		.hce-source-pane {
		.hce-main-pane {
		flex: 1;
		min-width: 0;
		display: flex;
		flex-direction: column;
		}

		.hce-main-pane .prop-tabs {
		margin: 0;
		padding: 0 8px;
		background: var(--bg-secondary);
		flex: none;
		}

		.hce-tab-panels {
		flex: 1;
		min-height: 0;
		display: flex;
		}

		.hce-tab-panel {
		flex: 1;
		min-width: 0;
		min-height: 0;
		display: flex;
		flex-direction: column;
		}

		#hce-source {
		@@ -1607,6 +1629,86 @@ dialog label {
		box-sizing: border-box;
		}

		/* Preview tab: font-editing toolbar + live iframe */
		.hce-font-toolbar {
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		gap: 6px;
		min-height: 36px;
		padding: 6px 8px;
		background: var(--bg-tertiary);
		border-bottom: 1px solid var(--border);
		flex: none;
		}

		.hce-font-hint {
		color: var(--text-muted);
		font-size: 12px;
		}

		.hce-font-controls {
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		gap: 6px;
		}

		.hce-font-controls input[type="text"],
		.hce-font-controls select {
		padding: 4px 6px;
		background: var(--bg-secondary);
		color: var(--text-primary);
		border: 1px solid var(--border);
		border-radius: 3px;
		font-size: 12px;
		}

		#hce-font-family {
		width: 170px;
		}

		#hce-font-size {
		width: 70px;
		}

		.hce-color-input {
		width: 28px;
		height: 26px;
		padding: 0;
		border: 1px solid var(--border);
		border-radius: 3px;
		background: none;
		cursor: pointer;
		}

		#hce-font-clear {
		padding: 4px 8px;
		background: var(--bg-secondary);
		color: var(--text-secondary);
		border: 1px solid var(--border);
		border-radius: 3px;
		cursor: pointer;
		font-size: 12px;
		}

		#hce-font-clear:hover {
		background: var(--bg-hover);
		color: var(--text-primary);
		}

		.hce-preview-frame-wrap {
		flex: 1;
		min-height: 0;
		}

		#hce-preview-iframe {
		width: 100%;
		height: 100%;
		border: none;
		background: #1e1e2e;
		}

		.hce-tree-pane {
		width: 280px;
		min-width: 280px;

editor/html/index.html

+59 −6

Original line number	Diff line number	Diff line
		@@ -386,18 +386,71 @@
		</div>
		</dialog>

		<!-- Custom HTML source editor: large modal with a raw-source pane and a
		read-only element-tree sidebar (parsed live from the source) for
		navigating the markup. The tree only selects/scrolls the textarea;
		the textarea remains the single source of truth that gets saved. -->
		<!-- Custom HTML source editor: large modal with a raw-source tab, a
		live-preview tab (with a font-editing toolbar), and a read-only
		element-tree sidebar (parsed live from the source, shared by both
		tabs) for navigating the markup. The source textarea is always the
		single source of truth that gets saved — the preview iframe is
		rebuilt from it, and font edits made in the preview patch the
		textarea's inline style attributes in place (see html-code-editor.js). -->
		<dialog id="html-code-editor-dialog" class="html-code-editor-dialog">
		<div class="hce-header">
		<h3 data-i18n="I18N_HTML_EDITOR_TITLE">HTML-Editor</h3>
		</div>
		<div class="hce-body">
		<div class="hce-source-pane">
		<div class="hce-main-pane">
		<div class="prop-tabs">
		<button type="button" class="prop-tab active" id="btn-hce-tab-source" data-i18n="I18N_HTML_EDITOR_TAB_SOURCE">Quelltext</button>
		<button type="button" class="prop-tab" id="btn-hce-tab-preview" data-i18n="I18N_HTML_EDITOR_TAB_PREVIEW">Vorschau</button>
		</div>
		<div class="hce-tab-panels">
		<div class="hce-tab-panel" id="hce-panel-source">
		<textarea id="hce-source" spellcheck="false"></textarea>
		</div>
		<div class="hce-tab-panel" id="hce-panel-preview" style="display:none">
		<div class="hce-font-toolbar">
		<span class="hce-font-hint" id="hce-font-hint" data-i18n="I18N_HTML_EDITOR_FONT_HINT">Element in der Vorschau anklicken, um die Schrift zu bearbeiten.</span>
		<div class="hce-font-controls" id="hce-font-controls" style="display:none">
		<input type="text" id="hce-font-family" list="hce-font-family-list" data-i18n-placeholder="I18N_HTML_EDITOR_FONT_FAMILY" placeholder="Schriftart">
		<datalist id="hce-font-family-list">
		<option value="Arial, sans-serif">
		<option value="Helvetica, Arial, sans-serif">
		<option value="'Times New Roman', serif">
		<option value="Georgia, serif">
		<option value="'Courier New', monospace">
		<option value="Verdana, sans-serif">
		<option value="Tahoma, sans-serif">
		<option value="'Trebuchet MS', sans-serif">
		<option value="'Segoe UI', sans-serif">
		<option value="Roboto, sans-serif">
		<option value="'Open Sans', sans-serif">
		<option value="Lato, sans-serif">
		<option value="Montserrat, sans-serif">
		<option value="inherit">
		</datalist>
		<input type="text" id="hce-font-size" data-i18n-placeholder="I18N_HTML_EDITOR_FONT_SIZE" placeholder="Größe">
		<select id="hce-font-weight">
		<option value="100">100</option>
		<option value="200">200</option>
		<option value="300">300</option>
		<option value="400">400</option>
		<option value="500">500</option>
		<option value="600">600</option>
		<option value="700">700</option>
		<option value="800">800</option>
		<option value="900">900</option>
		</select>
		<button type="button" id="hce-font-italic" class="rte-btn" style="font-style:italic" title="Kursiv">I</button>
		<input type="color" id="hce-font-color" class="hce-color-input" title="Farbe">
		<button type="button" id="hce-font-clear" data-i18n="I18N_HTML_EDITOR_FONT_RESET">Zurücksetzen</button>
		</div>
		</div>
		<div class="hce-preview-frame-wrap">
		<iframe id="hce-preview-iframe" title="Vorschau"></iframe>
		</div>
		</div>
		</div>
		</div>
		<div class="hce-tree-pane">
		<div class="hce-tree-actions">
		<button type="button" id="btn-hce-expand-all" data-i18n-title="I18N_TITLE_EXPAND_ALL" title="Alle aufklappen">▼</button>

editor/html/js/html-code-editor.js

+297 −28

File changed.

Preview size limit exceeded, changes collapsed.

editor/html/js/properties.js

+6 −1

Original line number	Diff line number	Diff line
		@@ -849,7 +849,12 @@ var PropertiesPanel = (function() {
		hceBtn.textContent = I18n.t('I18N_HTML_EDITOR_OPEN', 'Editor öffnen');
		hceBtn.addEventListener('click', function() {
		if (typeof HtmlCodeEditor === 'undefined') return;
		HtmlCodeEditor.open(hceHidden.value, function(newValue) {
		var cssCtx = '';
		if (field.css_context_key) {
		var cssField = form.querySelector('[name="' + field.css_context_key + '"]');
		cssCtx = cssField ? cssField.value : (properties[field.css_context_key] \|\| '');
		}
		HtmlCodeEditor.open(hceHidden.value, cssCtx, function(newValue) {
		hceHidden.value = newValue;
		hceRefreshPreview();
		hceHidden.dispatchEvent(new Event('change', { bubbles: true }));

editor/widgets/customhtml/customhtml.cpp

+9 −0

Original line number	Diff line number	Diff line
		@@ -180,6 +180,15 @@ extern "C" {
		json_object_array_add(arr, f);
		};
		addField("html_content", "HTML Content", "html_editor", "<div>Your custom HTML here</div>");
		{
		// Lets the editor's visual preview scope the widget's own CSS
		// field around the previewed markup, the same way Render()
		// wraps cssContent around the real "." + responsiveClass
		// wrapper — without this the preview would show unstyled
		// markup even though css_content applies on the real page.
		json_object *hf = json_object_array_get_idx(arr, json_object_array_length(arr) - 1);
		json_object_object_add(hf, "css_context_key", json_object_new_string("css_content"));
		}
		addField("css_content", "CSS", "textarea", "color: red; font-size: 16px;");
		addField("js_content", "JavaScript", "textarea", "console.log(\"Hello from widget\");");
		addField("width", "Width", "text", "e.g. 100%", "desktop");