add babycode preview

This commit is contained in:
2026-05-28 10:00:10 +03:00
parent daf205f200
commit 27314f34a5
6 changed files with 104 additions and 7 deletions

View File

@@ -72,15 +72,15 @@
</span>
{%- endmacro %}
{% macro tabs(prefix='', labels = []) -%}
{% macro tabs(prefix='', labels=[], signal_ss=[], signal_rs=[]) -%}
<div class="tab-container" data-r="setTab">
<div class="tab-bar" role="tablist">
{%- for tab_label in labels -%}
<button type="button" class="tab-button" role="tab" aria-selected="{{'true' if loop.index0==0 else 'false'}}" id="{{prefix+'-'+(tab_label | lower)+'-tab'}}" aria-controls="{{prefix+'-'+(tab_label | lower)+'-content'}}" disabled data-r="enhance" data-s="setTab" data-tab-index="{{loop.index0}}">{{tab_label}}</button>
<button type="button" class="tab-button" role="tab" aria-selected="{{'true' if loop.index0==0 else 'false'}}" id="{{prefix+'-'+(tab_label | lower)+'-tab'}}" aria-controls="{{prefix+'-'+(tab_label | lower)+'-content'}}" disabled data-r="enhance" data-s="setTab {{signal_ss[loop.index0] if signal_ss[loop.index0] else ''}}" data-tab-index="{{loop.index0}}">{{tab_label}}</button>
{%- endfor -%}
</div>
{%- for tab_label in labels -%}
<div class="plank secondary-bg even no-shadow tab-content {{'hidden' if loop.index0!=0 else ''}}" role="tabpanel" aria-labelledby="{{prefix+'-'+(tab_label | lower)+'-tab'}}" id="{{prefix+'-'+(tab_label | lower)+'-content'}}">
<div class="plank secondary-bg even no-shadow tab-content {{'hidden' if loop.index0!=0 else ''}}" role="tabpanel" aria-labelledby="{{prefix+'-'+(tab_label | lower)+'-tab'}}" id="{{prefix+'-'+(tab_label | lower)+'-content'}}" data-r="{{signal_rs[loop.index0] if signal_rs[loop.index0] else ''}}">
{{- caller(loop.index0) -}}
</div>
{%- endfor -%}
@@ -94,7 +94,7 @@
id='babycode-content',
banned_tags=[]
) -%}
{%- call(idx) tabs(prefix='babycode', labels=['Write', 'Preview']) -%}
{%- call(idx) tabs(prefix='babycode', labels=['Write', 'Preview'], signal_ss=[none, 'babycodePreviewInit'], signal_rs=[none, 'babycodePreview']) -%}
{%- if idx == 0 -%}
<span class="babycode-editor-controls">
<span class="button-row js-only" data-r="enhance">
@@ -109,10 +109,10 @@
<button type="button" title="insert spoiler" class="minimal" data-babycode-tag="spoiler=" data-break-line data-prefill="spoiler content" data-s="insertBabycode">s</button>
<button type="button" title="insert emoji&hellip;" class="minimal"><img src="/static/emoji/angry.png" class="emoji"></button>
</span>
<span class="flex-last">{# stub: char count #}</span>
<span class="flex-last js-only" data-r="enhance">stub: char count</span>
</span>
<input type="hidden" name="babycode_banned_tags" id="{{id}}-banned-tags" value="{{banned_tags | unique | list | tojson | forceescape}}">
<textarea name="babycode_content" id="{{id}}" class="babycode-editor" placeholder="{{placeholder}}" {{'required' if required else ''}} autocomplete="off" maxlength="5000" data-r="insertBabycode">{{ prefill }}</textarea>
<textarea name="babycode_content" id="{{id}}" class="babycode-editor" placeholder="{{placeholder}}" {{'required' if required else ''}} autocomplete="off" maxlength="5000" data-r="insertBabycode babycodePreviewInit" data-banned-tags="{{banned_tags | unique | list | tojson | forceescape}}">{{ prefill }}</textarea>
{%- if banned_tags -%}
<div>
<span>Forbidden tags:</span>
@@ -124,6 +124,8 @@
</div>
{%- endif -%}
<a href="##">babycode help</a>
{%- else -%}
<div data-r="showBabycodePreview"></div>
{%- endif -%}
{%- endcall -%}
{%- endmacro %}

View File

@@ -17,6 +17,7 @@
<input type="submit" value="Clear MOTD" class="warn">
</form>
</fieldset>
{{babycode_editor_component(placeholder='test', id='test-content')}}
<fieldset class="plank" id="sort-topics">
<legend>Sort topics</legend>
<p>Drag topics around to reorder them. Press "Save order" when done.</p>