Files
wordpress-theme-aksrt/assets/admin/src/components/form/JioCodeEditor.vue
T
kate522andClaude Opus 5 427968a721 chore(branding): remove leftover upstream theme identifiers
The theme was renamed Zibll/子比 → AKSRT → Jio, but upstream branding
survived the sweeps in CSS classes, the SVG sprite prefix, a persisted
widget field ID, JS events, admin Vue class names, test infrastructure
and docblocks.

Renames:
- zib-widget / zib-widget-wrap / zib-slider → jio-widget-box /
  jio-widget-box-wrap / jio-slider-box (jio-widget is taken by the modern
  widget shell, jio-box-* by the card primitives)
- zib-partners-scroll + zps-* → jio-partners-scroll + jps-*
- zib-combo-info-card + zci-* → jio-combo-info-card + jci-*
- zibsvg- → jiosvg-, including the exported picker helpers and the
  fa-zibsvg- family-prefix guard
- zibpay_type → pay_type; the dual-read fallback in PostQuery collapses
  to a single key
- [zibajax="submit"] dropped (no PHP emitter); zib_ajax.success →
  jio_ajax.success
- aks-* admin Vue classes → jio-*
- zib_palette() → palette()

User-facing vendor traces are gone: the floating "more" button default no
longer ships a zibll.com link or 子比主题 marketing copy, the notice
widget ships no preset promo entries, and the four 官网教程 links are
removed from the post-list admin schema.

Test infrastructure renamed to neutral names (docker-compose.reference.yml,
Caddyfile, article-baseline.json, modern-widgets-contract.test.cjs) with
their DB/volume/env/slug identifiers following.

Kept intentionally, documented in tests/fixtures/README.md: the golden
fixture reference fingerprint (a SHA-256 record of an external directory,
read by validate-widget-golden / generate-widget-golden-fixture /
audit-widget-system), the doesNotMatch guards that prove the old tokens are
gone, and the reference theme's own meta key in the visual fixtures.

No backward-compat or data migration: saved widget configs holding old
icon keys or the old field ID silently lose them, per the project's
rewrite-over-compatibility rule.

Verified: 132/132 node contract tests, php tests/widget-system/run.php
(146 assertions), audit-admin-contracts, audit-psr4-paths and
validate-widget-golden all green; tracked bundles regenerated and in sync.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
2026-11-02 00:06:54 +08:00

106 lines
2.6 KiB
Vue

<template>
<div ref="editorRef" class="jio-code-editor" :class="{ 'is-disabled': disabled }" />
</template>
<script setup>
import { ref, watch, onMounted, onBeforeUnmount, shallowRef } from 'vue'
import { EditorView, basicSetup } from 'codemirror'
import { EditorState } from '@codemirror/state'
import { html } from '@codemirror/lang-html'
import { css } from '@codemirror/lang-css'
import { javascript } from '@codemirror/lang-javascript'
import { oneDark } from '@codemirror/theme-one-dark'
const props = defineProps({
modelValue: { type: String, default: '' },
language: { type: String, default: 'html' },
disabled: { type: Boolean, default: false },
rows: { type: Number, default: 8 },
})
const emit = defineEmits(['update:modelValue'])
const editorRef = ref(null)
const view = shallowRef(null)
let updating = false
function resolveLang(lang) {
switch (lang) {
case 'css': return css()
case 'js':
case 'javascript': return javascript()
case 'html':
default: return html()
}
}
onMounted(() => {
if (!editorRef.value) return
const state = EditorState.create({
doc: props.modelValue || '',
extensions: [
basicSetup,
resolveLang(props.language),
oneDark,
EditorView.updateListener.of((update) => {
if (update.docChanged && !updating) {
const val = update.state.doc.toString()
emit('update:modelValue', val)
}
}),
EditorView.editable.of(!props.disabled),
EditorState.readOnly.of(props.disabled),
],
})
view.value = new EditorView({ state, parent: editorRef.value })
})
watch(() => props.modelValue, (newVal) => {
if (!view.value) return
const current = view.value.state.doc.toString()
if (newVal !== current) {
updating = true
view.value.dispatch({
changes: { from: 0, to: current.length, insert: newVal || '' },
})
updating = false
}
})
watch(() => props.disabled, (val) => {
if (!view.value) return
view.value.dispatch({
effects: [
EditorView.editable.reconfigure(EditorView.editable.of(!val)),
EditorState.readOnly.reconfigure(EditorState.readOnly.of(val)),
],
})
})
onBeforeUnmount(() => {
if (view.value) {
view.value.destroy()
view.value = null
}
})
</script>
<style scoped>
.jio-code-editor {
border: 1px solid var(--n-border-color, #e0e0e6);
border-radius: 4px;
overflow: hidden;
min-height: calc(var(--rows, 8) * 22px);
}
.jio-code-editor :deep(.cm-editor) {
font-size: 13px;
}
.jio-code-editor :deep(.cm-editor.cm-focused) {
outline: none;
}
.jio-code-editor.is-disabled {
opacity: 0.6;
pointer-events: none;
}
</style>