mirror of https://github.com/requarks/wiki
NGPixel
5 days ago
parent
a857f96bb0
commit
7cf47610d1
@ -0,0 +1,257 @@
|
||||
import { LitElement, html, css } from 'lit'
|
||||
import { deflateRaw } from 'pako'
|
||||
import { DarkMode } from '../shared/theme.js'
|
||||
|
||||
/**
|
||||
* The draw.io that answers when the block names no server.
|
||||
*
|
||||
* Two hosts, because draw.io publishes two deployments of the same application: `viewer` is the one
|
||||
* that opens a diagram read-only from a link, `embed` the one the editor talks to over postMessage
|
||||
* (see `BlockContentDrawio.vue`). A self-hosted draw.io is one deployment doing both, which is why the
|
||||
* `server` prop replaces both and defaults to neither.
|
||||
*/
|
||||
const PUBLIC_VIEWER = 'https://viewer.diagrams.net'
|
||||
|
||||
/** How many bytes are turned into characters at a time, below. */
|
||||
const CHUNK_SIZE = 0x8000
|
||||
|
||||
/**
|
||||
* A drawing as draw.io writes it into a link fragment.
|
||||
*
|
||||
* This is `Graph.compress` from draw.io itself, and every step of it matters to the other end:
|
||||
* percent-encode, raw deflate (no zlib header, unlike Kroki's), then base64. The percent-encoding
|
||||
* comes FIRST and is not a transport detail — draw.io decompresses and then `decodeURIComponent`s, so
|
||||
* a diagram deflated without it comes back mangled at every non-ASCII character.
|
||||
*
|
||||
* `btoa` takes a string, and spreading a whole drawing into `String.fromCharCode` at once overflows
|
||||
* the stack somewhere in the tens of thousands of bytes — hence a chunk at a time, as `block-kroki`
|
||||
* does for the same reason.
|
||||
*/
|
||||
function compressForUrl(xml) {
|
||||
const bytes = deflateRaw(encodeURIComponent(xml))
|
||||
let binary = ''
|
||||
for (let i = 0; i < bytes.length; i += CHUNK_SIZE) {
|
||||
binary += String.fromCharCode(...bytes.subarray(i, i + CHUNK_SIZE))
|
||||
}
|
||||
return btoa(binary)
|
||||
}
|
||||
|
||||
/**
|
||||
* Block Draw.io
|
||||
*/
|
||||
export class BlockDrawioElement extends LitElement {
|
||||
/**
|
||||
* Metadata for the admin area and the editor's block picker. Collected at build time into
|
||||
* `compiled/blocks.manifest.json`, which the server reads to register the block. Values must be
|
||||
* plain literals. See `props` in `block-index` for what the picker does with that list.
|
||||
*/
|
||||
static definition = {
|
||||
block: 'drawio',
|
||||
name: 'Draw.io',
|
||||
description: 'A diagram drawn in draw.io, stored as its own XML and edited on a canvas.',
|
||||
icon: 'web-design',
|
||||
/*
|
||||
Fenced, and `xml` because that is what a draw.io document is — so an author reading the page
|
||||
source gets it highlighted, and markdown keeps its hands off it. Without the fence a drawing is
|
||||
a document full of `<` and `_` and lines beginning with spaces, every one of which means
|
||||
something to markdown.
|
||||
*/
|
||||
template: `\`\`\`xml
|
||||
<mxfile>
|
||||
<diagram name="Page-1">
|
||||
<mxGraphModel dx="800" dy="600" grid="1" gridSize="10" page="1" pageWidth="850" pageHeight="1100">
|
||||
<root>
|
||||
<mxCell id="0" />
|
||||
<mxCell id="1" parent="0" />
|
||||
</root>
|
||||
</mxGraphModel>
|
||||
</diagram>
|
||||
</mxfile>
|
||||
\`\`\``,
|
||||
/*
|
||||
The body is a drawing, so it is edited on a canvas rather than typed: this names the editor the
|
||||
markdown editor offers above the block, as a second lens beside "Edit Block Parameters". The key
|
||||
is resolved to a component by `BlockContentEditorOverlay`; nothing about draw.io reaches the
|
||||
block system itself.
|
||||
*/
|
||||
contentEditor: 'drawio',
|
||||
props: [
|
||||
{
|
||||
name: 'server',
|
||||
type: 'string',
|
||||
label: 'Server',
|
||||
hint: 'A self-hosted draw.io to draw and display with. The public diagrams.net services when left empty.'
|
||||
},
|
||||
{
|
||||
name: 'height',
|
||||
type: 'number',
|
||||
label: 'Height',
|
||||
hint: 'How tall the diagram is, in pixels.',
|
||||
default: 420
|
||||
},
|
||||
{
|
||||
name: 'caption',
|
||||
type: 'string',
|
||||
label: 'Caption',
|
||||
hint: 'Shown under the diagram.'
|
||||
},
|
||||
{
|
||||
name: 'align',
|
||||
type: 'select',
|
||||
label: 'Alignment',
|
||||
options: ['left', 'center'],
|
||||
default: 'left'
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
static get styles() {
|
||||
return css`
|
||||
:host {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* -> The gap below the block. On this element rather than :host: see block-index. */
|
||||
.diagram,
|
||||
.error {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.diagram {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 8px;
|
||||
}
|
||||
.diagram.is-center {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
/*
|
||||
The frame carries the border rather than the iframe: draw.io's lightbox paints its own
|
||||
background over the whole box, so a border on the iframe itself is drawn under it at the
|
||||
corners.
|
||||
*/
|
||||
.frame {
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
border: 1px solid rgba(0, 0, 0, 0.12);
|
||||
border-radius: 5px;
|
||||
overflow: hidden;
|
||||
background-color: #fff;
|
||||
}
|
||||
:host([dark]) .frame {
|
||||
border-color: rgba(255, 255, 255, 0.12);
|
||||
background-color: #18191a;
|
||||
}
|
||||
|
||||
iframe {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.caption {
|
||||
font-size: 0.8em;
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.error {
|
||||
padding: 12px;
|
||||
border-radius: 5px;
|
||||
border: 1px solid #c10015;
|
||||
color: #c10015;
|
||||
font-size: 0.9em;
|
||||
}
|
||||
`
|
||||
}
|
||||
|
||||
static get properties() {
|
||||
return {
|
||||
/** A self-hosted draw.io, standing in for both public services. */
|
||||
server: { type: String },
|
||||
/** How tall the frame is, in pixels. */
|
||||
height: { type: Number },
|
||||
/** Shown under the diagram. */
|
||||
caption: { type: String },
|
||||
/** `left` or `center`. */
|
||||
align: { type: String },
|
||||
|
||||
_source: { state: true }
|
||||
}
|
||||
}
|
||||
|
||||
constructor() {
|
||||
super()
|
||||
this.server = ''
|
||||
this.height = 420
|
||||
this.caption = ''
|
||||
this.align = 'left'
|
||||
this._source = ''
|
||||
/*
|
||||
The lightbox reads its theme from the URL at load, so the frame is rebuilt when the reader
|
||||
switches — which for a read-only diagram costs nothing, unlike doing the same to the editor.
|
||||
*/
|
||||
this._darkMode = new DarkMode(this)
|
||||
}
|
||||
|
||||
connectedCallback() {
|
||||
super.connectedCallback()
|
||||
this._readSource()
|
||||
}
|
||||
|
||||
/**
|
||||
* The drawing, out of the body markdown left behind.
|
||||
*
|
||||
* `textContent` on the `<pre>` is what undoes the escaping the fence went through — the same three
|
||||
* lines every source block in this wiki uses.
|
||||
*/
|
||||
_readSource() {
|
||||
const fence = this.querySelector('pre')
|
||||
this._source = ((fence ?? this).textContent ?? '').trim()
|
||||
}
|
||||
|
||||
/**
|
||||
* The link the frame opens.
|
||||
*
|
||||
* `lightbox=1` is draw.io's read-only viewer: no editing, no menus, just the drawing with zoom and
|
||||
* a layers control. `edit=_blank` is deliberately absent — the pencil it adds opens the diagram in
|
||||
* a copy of draw.io that has nowhere to save to, and the way to change a drawing here is the page.
|
||||
*/
|
||||
_url() {
|
||||
const server = (this.server || '').trim().replace(/\/+$/, '') || PUBLIC_VIEWER
|
||||
const params = new URLSearchParams({
|
||||
lightbox: '1',
|
||||
nav: '1',
|
||||
ui: this._darkMode.isDark ? 'dark' : 'kennedy'
|
||||
})
|
||||
return `${server}/?${params.toString()}#R${encodeURIComponent(compressForUrl(this._source))}`
|
||||
}
|
||||
|
||||
render() {
|
||||
if (!this._source) {
|
||||
return html`
|
||||
<div class="error">
|
||||
This diagram is empty. Draw one with the Edit Content link above the block in the editor.
|
||||
</div>
|
||||
`
|
||||
}
|
||||
const height = Number(this.height) > 0 ? Number(this.height) : 420
|
||||
return html`
|
||||
<div class="diagram ${this.align === 'center' ? 'is-center' : ''}">
|
||||
<div class="frame" style="height: ${height}px">
|
||||
<iframe
|
||||
src=${this._url()}
|
||||
title=${this.caption || 'Diagram'}
|
||||
loading="lazy"
|
||||
referrerpolicy="strict-origin-when-cross-origin"
|
||||
allowfullscreen></iframe>
|
||||
</div>
|
||||
${this.caption ? html`<div class="caption">${this.caption}</div>` : ''}
|
||||
</div>
|
||||
`
|
||||
}
|
||||
}
|
||||
|
||||
window.customElements.define('block-drawio', BlockDrawioElement)
|
||||
@ -0,0 +1,233 @@
|
||||
<template>
|
||||
<div class="block-content-drawio">
|
||||
<iframe
|
||||
ref="frameEl"
|
||||
class="block-content-drawio-frame"
|
||||
:src="editorUrl"
|
||||
:title="t('editor.blockContent.drawioTitle')" />
|
||||
<!--
|
||||
Covers the frame until draw.io says hello, and stays covering it if it never does. The editor is
|
||||
loaded from another host, so "nothing appeared" is a real outcome — an offline wiki, a blocked
|
||||
origin, a self-hosted deployment that has moved — and a blank white rectangle explains none of
|
||||
that.
|
||||
-->
|
||||
<div v-if="!state.ready" class="block-content-drawio-veil">
|
||||
<template v-if="state.timedOut">
|
||||
<w-icon name="la:plug" size="42px" />
|
||||
<div class="mt-3 text-body1">{{ t('editor.blockContent.drawioUnreachable') }}</div>
|
||||
<div class="text-caption mt-1 opacity-70">{{ origin }}</div>
|
||||
</template>
|
||||
<template v-else>
|
||||
<w-spinner size="42px" color="primary" />
|
||||
<div class="mt-3 text-caption">{{ t('editor.blockContent.drawioLoading') }}</div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { computed, onBeforeUnmount, onMounted, reactive, ref } from 'vue'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
|
||||
import { useDark } from '@/composables/dark'
|
||||
|
||||
/**
|
||||
* The draw.io drawing surface, as a body editor for `block-drawio`.
|
||||
*
|
||||
* Everything in this file is draw.io's own: nothing else in the app knows this protocol, and the
|
||||
* block system it plugs into knows only that it takes a string of text and gives one back. See
|
||||
* `BlockContentEditorOverlay` for what an editor component has to be.
|
||||
*
|
||||
* draw.io is embedded rather than reimplemented, and it is embedded rather than bundled because it is
|
||||
* a whole application. The wiki holds an iframe and talks to it over `postMessage`, which is what the
|
||||
* `embed=1&proto=json` mode of any draw.io deployment offers:
|
||||
*
|
||||
* in `{ event: 'init' }` it is ready to be given a drawing
|
||||
* out `{ action: 'load', xml, … }` here is the drawing
|
||||
* in `{ event: 'autosave', xml }` the drawing changed
|
||||
* in `{ event: 'save', xml }` the author pressed its Save button
|
||||
*
|
||||
* `autosave` is what keeps this component's model current, so the overlay's own Apply always has the
|
||||
* drawing as it stands; `save` is the same thing plus "and close", which is what the author means by
|
||||
* pressing it. Nothing is ever uploaded: an embedded draw.io does its work in the browser, and the XML
|
||||
* arrives here rather than at whoever is hosting the editor.
|
||||
*/
|
||||
|
||||
// PROPS
|
||||
|
||||
const props = defineProps({
|
||||
/** The block's body: a draw.io XML document, or empty for a drawing that does not exist yet. */
|
||||
modelValue: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
/** The block's own parameters. Only `server` means anything here. */
|
||||
params: {
|
||||
type: Object,
|
||||
default: () => ({})
|
||||
}
|
||||
})
|
||||
|
||||
// EMITS
|
||||
|
||||
const emit = defineEmits(['update:modelValue', 'save'])
|
||||
|
||||
/**
|
||||
* The draw.io that answers when the block names none.
|
||||
*
|
||||
* `embed.diagrams.net` is the deployment draw.io publishes for exactly this, and it is a different
|
||||
* host from the `viewer.diagrams.net` the block reads a finished drawing from — which is why the
|
||||
* block's `server` prop has a default on neither side and means "the public services" when empty.
|
||||
*/
|
||||
const PUBLIC_EDITOR = 'https://embed.diagrams.net'
|
||||
|
||||
/** How long draw.io has to say `init` before the veil stops being a spinner and starts explaining. */
|
||||
const READY_TIMEOUT = 20000
|
||||
|
||||
// DARK MODE
|
||||
|
||||
// -> The reader's effective theme, not the site's default: a user who has chosen light on a dark wiki
|
||||
// should be drawing on a light canvas
|
||||
const dark = useDark()
|
||||
|
||||
// I18N
|
||||
|
||||
const { t } = useI18n()
|
||||
|
||||
// DATA
|
||||
|
||||
const frameEl = ref(null)
|
||||
|
||||
const state = reactive({
|
||||
ready: false,
|
||||
timedOut: false
|
||||
})
|
||||
|
||||
let readyTimer = null
|
||||
|
||||
// COMPUTED
|
||||
|
||||
const server = computed(() => String(props.params.server || '').trim() || PUBLIC_EDITOR)
|
||||
|
||||
/** Where messages are sent, and the only place they are accepted from. */
|
||||
const origin = computed(() => {
|
||||
try {
|
||||
return new URL(server.value).origin
|
||||
} catch {
|
||||
return ''
|
||||
}
|
||||
})
|
||||
|
||||
const editorUrl = computed(() => {
|
||||
/*
|
||||
`ui` is settled once, when the frame is built, and deliberately does not follow the reader
|
||||
switching theme underneath it: the parameter is read at load, so keeping the two in step would
|
||||
mean reloading draw.io — and reloading it mid-drawing is the one thing that would lose work.
|
||||
*/
|
||||
const params = new URLSearchParams({
|
||||
embed: '1',
|
||||
proto: 'json',
|
||||
spin: '1',
|
||||
libraries: '1',
|
||||
// -> The overlay's own Cancel is the way out, and two of them beside each other say different
|
||||
// things about the unsaved drawing
|
||||
noExitBtn: '1',
|
||||
saveAndExit: '0',
|
||||
ui: dark.isActive ? 'dark' : 'kennedy'
|
||||
})
|
||||
return `${server.value.replace(/\/+$/, '')}/?${params.toString()}`
|
||||
})
|
||||
|
||||
// METHODS
|
||||
|
||||
function post(message) {
|
||||
frameEl.value?.contentWindow?.postMessage(JSON.stringify(message), origin.value || '*')
|
||||
}
|
||||
|
||||
/**
|
||||
* One message from the frame.
|
||||
*
|
||||
* Both the window it came from and the origin it came from are checked. The window because any page
|
||||
* may post to any other, and this listener is on `window`; the origin because the frame's own
|
||||
* `contentWindow` is still whatever has been navigated into it.
|
||||
*/
|
||||
function onMessage(event) {
|
||||
if (event.source !== frameEl.value?.contentWindow) {
|
||||
return
|
||||
}
|
||||
if (origin.value && event.origin !== origin.value) {
|
||||
return
|
||||
}
|
||||
let message = null
|
||||
try {
|
||||
message = JSON.parse(event.data)
|
||||
} catch {
|
||||
// -> Not ours: draw.io speaks JSON here, and its other protocols do not
|
||||
return
|
||||
}
|
||||
switch (message.event) {
|
||||
case 'init':
|
||||
state.ready = true
|
||||
clearTimeout(readyTimer)
|
||||
// -> `autosave` is what makes the frame report every change, which is what Apply relies on
|
||||
post({ action: 'load', autosave: 1, xml: props.modelValue })
|
||||
break
|
||||
case 'autosave':
|
||||
emit('update:modelValue', message.xml ?? '')
|
||||
break
|
||||
case 'save':
|
||||
emit('update:modelValue', message.xml ?? '')
|
||||
emit('save')
|
||||
break
|
||||
}
|
||||
}
|
||||
|
||||
// LIFECYCLE
|
||||
|
||||
onMounted(() => {
|
||||
window.addEventListener('message', onMessage)
|
||||
readyTimer = setTimeout(() => {
|
||||
state.timedOut = true
|
||||
}, READY_TIMEOUT)
|
||||
})
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
window.removeEventListener('message', onMessage)
|
||||
clearTimeout(readyTimer)
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.block-content-drawio {
|
||||
position: relative;
|
||||
display: flex;
|
||||
min-height: 0;
|
||||
flex: 1 1 auto;
|
||||
|
||||
&-frame {
|
||||
flex: 1 1 auto;
|
||||
border: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
/* -> Over the frame rather than instead of it: draw.io is loading behind this the whole time */
|
||||
&-veil {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
padding: 1rem;
|
||||
|
||||
@at-root .body--light & {
|
||||
background-color: #fff;
|
||||
}
|
||||
@at-root .body--dark & {
|
||||
background-color: $dark-5;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,184 @@
|
||||
<template>
|
||||
<w-layout class="block-content-editor" view="hHh lpR fFf" container>
|
||||
<w-header class="card-header px-4 py-2">
|
||||
<w-icon
|
||||
:name="`img:/_assets/icons/ultraviolet-${block.isCustom ? 'plugin' : block.icon}.svg`"
|
||||
left
|
||||
size="md" />
|
||||
<div>
|
||||
<span>{{ t('editor.blockContent.title') }}</span>
|
||||
<div class="text-caption">{{ block.name }}</div>
|
||||
</div>
|
||||
<w-space />
|
||||
<w-btn-group push>
|
||||
<w-btn
|
||||
push
|
||||
color="white"
|
||||
text-color="grey-7"
|
||||
:label="t(`common.actions.cancel`)"
|
||||
:aria-label="t(`common.actions.cancel`)"
|
||||
icon="la:times"
|
||||
@click="close" />
|
||||
<w-btn
|
||||
push
|
||||
color="positive"
|
||||
text-color="white"
|
||||
:label="t(`common.actions.apply`)"
|
||||
:aria-label="t(`common.actions.apply`)"
|
||||
icon="la:check"
|
||||
@click="apply" />
|
||||
</w-btn-group>
|
||||
</w-header>
|
||||
<w-page-container>
|
||||
<!--
|
||||
No padding around the editor: every one of these is a whole working surface -- a canvas, a
|
||||
source pane -- and wants the screen it is given rather than a card's worth of it.
|
||||
-->
|
||||
<w-page class="block-content-editor-body">
|
||||
<component
|
||||
:is="editorComponent"
|
||||
v-if="editorComponent"
|
||||
v-model="state.source"
|
||||
:params="params"
|
||||
@save="apply" />
|
||||
<div v-else class="p-6">
|
||||
<w-card class="bg-negative rounded text-white" flat>
|
||||
<w-card-section class="items-center" horizontal>
|
||||
<w-card-section class="shrink-0 pr-0">
|
||||
<w-icon name="la:ban" size="lg" />
|
||||
</w-card-section>
|
||||
<w-card-section>
|
||||
<span>{{ t('editor.blockContent.unknownEditor') }}</span>
|
||||
<div class="text-caption text-red-1">{{ editorKey }}</div>
|
||||
</w-card-section>
|
||||
</w-card-section>
|
||||
</w-card>
|
||||
</div>
|
||||
</w-page>
|
||||
</w-page-container>
|
||||
</w-layout>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { computed, defineAsyncComponent, onBeforeUnmount, reactive } from 'vue'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
|
||||
import { useSiteStore } from '@/stores/site'
|
||||
|
||||
import LoadingGeneric from './LoadingGeneric.vue'
|
||||
|
||||
/**
|
||||
* The body of a block, in whatever editor the block named for it.
|
||||
*
|
||||
* The chrome and the plumbing are the block system's; what goes in the middle is not. A block
|
||||
* declares `contentEditor: '<key>'` in its `static definition`, the markdown editor offers an "Edit
|
||||
* Content" lens above it, and this resolves that key against the registry below — so adding an editor
|
||||
* is adding one component and one line to that map, and nothing anywhere else has to know what it
|
||||
* edits.
|
||||
*
|
||||
* What an editor component has to be, and the whole of it:
|
||||
*
|
||||
* - a `modelValue` of the block's body as text, and `update:modelValue` when it changes;
|
||||
* - a `params` object of the block's own parameters, for an editor that is configured by one — the
|
||||
* server it talks to, say. Which of them mean anything is the editor's business alone;
|
||||
* - optionally `@save`, for an editor with a save gesture of its own, which applies and closes.
|
||||
* An editor without one is applied by the button up here, which is always there either way.
|
||||
*
|
||||
* Text in and text out: the fence it lives in, the line it goes back on and the undo it lands in are
|
||||
* the markdown editor's, and it receives the result over the event bus the way the table editor and
|
||||
* the file manager hand theirs back.
|
||||
*/
|
||||
|
||||
/**
|
||||
* The editors a block may name, by the key it names them with.
|
||||
*
|
||||
* Async, so a block nobody on this page uses costs nothing to have — an embedded drawing editor is a
|
||||
* whole application, and it should not be in the bundle of a wiki that has never drawn one.
|
||||
*/
|
||||
const EDITORS = {
|
||||
drawio: defineAsyncComponent({
|
||||
loader: () => import('./BlockContentDrawio.vue'),
|
||||
loadingComponent: LoadingGeneric
|
||||
})
|
||||
}
|
||||
|
||||
// STORES
|
||||
|
||||
const siteStore = useSiteStore()
|
||||
|
||||
// I18N
|
||||
|
||||
const { t } = useI18n()
|
||||
|
||||
// DATA
|
||||
|
||||
/*
|
||||
Read once, on the way in. The overlay is opened by a store patch and closes by clearing it, so
|
||||
holding the block and its parameters here keeps them from going out from under the editor as it
|
||||
closes -- and the source is a copy, so leaving without applying leaves the page as it was.
|
||||
*/
|
||||
const editorKey = siteStore.overlayOpts?.editor ?? ''
|
||||
const block = siteStore.overlayOpts?.block ?? {}
|
||||
const params = siteStore.overlayOpts?.params ?? {}
|
||||
const replace = siteStore.overlayOpts?.replace ?? null
|
||||
|
||||
const state = reactive({
|
||||
source: siteStore.overlayOpts?.source ?? ''
|
||||
})
|
||||
|
||||
// COMPUTED
|
||||
|
||||
const editorComponent = computed(() => EDITORS[editorKey] ?? null)
|
||||
|
||||
// METHODS
|
||||
|
||||
function apply() {
|
||||
if (replace) {
|
||||
EVENT_BUS.emit('replaceBlockContent', { source: state.source, replace })
|
||||
}
|
||||
close()
|
||||
}
|
||||
|
||||
function close() {
|
||||
siteStore.$patch({ overlay: '' })
|
||||
}
|
||||
|
||||
// -> Cleared whichever way the overlay was left, so a body left behind in the options is not the one
|
||||
// the next block opens on
|
||||
onBeforeUnmount(() => {
|
||||
siteStore.overlayOpts = {}
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.block-content-editor {
|
||||
/*
|
||||
A foreground to go with the surface, as the table editor needs for the same reason: nothing in
|
||||
here sits on a `w-card`, and that is what declares the app's text colour -- so without this
|
||||
everything that merely inherits it stays black on the dark overlay.
|
||||
*/
|
||||
@at-root .body--light & {
|
||||
color: var(--color-black);
|
||||
}
|
||||
@at-root .body--dark & {
|
||||
color: var(--color-white);
|
||||
}
|
||||
|
||||
/*
|
||||
The editor fills the overlay. `min-height: 0` because this is a flex item of the page container:
|
||||
without it the box is sized by its content, and an editor asking for 100% of a box that is as tall
|
||||
as itself resolves to nothing at all.
|
||||
*/
|
||||
&-body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 0;
|
||||
padding: 0;
|
||||
|
||||
> * {
|
||||
flex: 1 1 auto;
|
||||
min-height: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in new issue