From b662ce8460e214ce4bdbb4e545387673db2c1f0f Mon Sep 17 00:00:00 2001
From: Johann150 <johann.galle@protonmail.com>
Date: Sun, 31 Jul 2022 22:49:02 +0200
Subject: [PATCH] client: simplify page editor

---
 .../pages/{page-editor => }/page-editor.vue   | 281 +-----------------
 .../client/src/scripts/collect-page-vars.ts   |  48 ---
 2 files changed, 6 insertions(+), 323 deletions(-)
 rename packages/client/src/pages/{page-editor => }/page-editor.vue (50%)
 delete mode 100644 packages/client/src/scripts/collect-page-vars.ts

diff --git a/packages/client/src/pages/page-editor/page-editor.vue b/packages/client/src/pages/page-editor.vue
similarity index 50%
rename from packages/client/src/pages/page-editor/page-editor.vue
rename to packages/client/src/pages/page-editor.vue
index f13dc8249..4e2074753 100644
--- a/packages/client/src/pages/page-editor/page-editor.vue
+++ b/packages/client/src/pages/page-editor.vue
@@ -1,6 +1,6 @@
 <template>
 <MkStickyContainer>
-	<template #header><MkPageHeader v-model:tab="tab" :actions="headerActions" :tabs="headerTabs"/></template>
+	<template #header><MkPageHeader v-model:tab="tab" :tabs="headerTabs"/></template>
 	<MkSpacer :content-max="700">
 		<div class="jqqmcavi">
 			<MkButton v-if="pageId" class="button" inline link :to="`/@${ author.username }/pages/${ currentName }`"><i class="fas fa-external-link-square-alt"></i> {{ $ts._pages.viewPage }}</MkButton>
@@ -45,69 +45,25 @@
 		</div>
 
 		<div v-else-if="tab === 'contents'">
-			<div>
-				<XBlocks v-model="content" class="content" :hpml="hpml"/>
-
-				<MkButton v-if="!readonly" @click="add()"><i class="fas fa-plus"></i></MkButton>
-			</div>
-		</div>
-
-		<div v-else-if="tab === 'variables'">
-			<div class="qmuvgica">
-				<XDraggable v-show="variables.length > 0" v-model="variables" tag="div" class="variables" item-key="name" handle=".drag-handle" :group="{ name: 'variables' }" animation="150" swap-threshold="0.5">
-					<template #item="{element}">
-						<XVariable
-							:model-value="element"
-							:removable="true"
-							:hpml="hpml"
-							:name="element.name"
-							:title="element.name"
-							:draggable="true"
-							@remove="() => removeVariable(element)"
-						/>
-					</template>
-				</XDraggable>
-
-				<MkButton v-if="!readonly" class="add" @click="addVariable()"><i class="fas fa-plus"></i></MkButton>
-			</div>
-		</div>
-
-		<div v-else-if="tab === 'script'">
-			<div>
-				<MkTextarea v-model="script" class="_code"/>
-			</div>
+			<textarea v-model="text"/>
 		</div>
 	</MkSpacer>
 </MkStickyContainer>
 </template>
 
 <script lang="ts" setup>
-import { defineAsyncComponent, computed, provide, watch } from 'vue';
-import 'prismjs';
-import { highlight, languages } from 'prismjs/components/prism-core';
-import 'prismjs/components/prism-clike';
-import 'prismjs/components/prism-javascript';
-import 'prismjs/themes/prism-okaidia.css';
-import 'vue-prism-editor/dist/prismeditor.min.css';
-import { v4 as uuid } from 'uuid';
-import XVariable from './page-editor.script-block.vue';
-import XBlocks from './page-editor.blocks.vue';
-import MkTextarea from '@/components/form/textarea.vue';
+import { computed, watch } from 'vue';
 import MkButton from '@/components/ui/button.vue';
 import MkSelect from '@/components/form/select.vue';
 import MkSwitch from '@/components/form/switch.vue';
 import MkInput from '@/components/form/input.vue';
-import { blockDefs } from '@/scripts/hpml/index';
-import { HpmlTypeChecker } from '@/scripts/hpml/type-checker';
 import { url } from '@/config';
-import { collectPageVars } from '@/scripts/collect-page-vars';
 import * as os from '@/os';
 import { selectFile } from '@/scripts/select-file';
 import { mainRouter } from '@/router';
 import { i18n } from '@/i18n';
 import { definePageMetadata } from '@/scripts/page-metadata';
 import { $i } from '@/account';
-const XDraggable = defineAsyncComponent(() => import('vuedraggable').then(x => x.default));
 
 const props = defineProps<{
 	initPageId?: string;
@@ -123,20 +79,13 @@ let pageId = $ref(null);
 let currentName = $ref(null);
 let title = $ref('');
 let summary = $ref(null);
+let text = $ref('Hello, world!');
 let name = $ref(Date.now().toString());
 let eyeCatchingImage = $ref(null);
 let eyeCatchingImageId = $ref(null);
 let font = $ref('sans-serif');
-let content = $ref([]);
 let alignCenter = $ref(false);
 let hideTitleWhenPinned = $ref(false);
-let variables = $ref([]);
-let hpml = $ref(null);
-let script = $ref('');
-
-provide('readonly', readonly);
-provide('getScriptBlockList', getScriptBlockList);
-provide('getPageBlockList', getPageBlockList);
 
 watch($$(eyeCatchingImageId), async () => {
 	if (eyeCatchingImageId == null) {
@@ -154,11 +103,9 @@ function getSaveOptions() {
 		name: name.trim(),
 		summary,
 		font,
-		script,
 		hideTitleWhenPinned,
 		alignCenter,
-		content,
-		variables,
+		text,
 		eyeCatchingImageId,
 	};
 }
@@ -239,111 +186,6 @@ function duplicate() {
 	});
 }
 
-async function add() {
-	const { canceled, result: type } = await os.select({
-		type: null,
-		title: i18n.ts._pages.chooseBlock,
-		groupedItems: getPageBlockList(),
-	});
-	if (canceled) return;
-
-	const id = uuid();
-	content.push({ id, type });
-}
-
-async function addVariable() {
-	let { canceled, result: name } = await os.inputText({
-		title: i18n.ts._pages.enterVariableName,
-	});
-	if (canceled) return;
-
-	name = name.trim();
-
-	if (hpml.isUsedName(name)) {
-		os.alert({
-			type: 'error',
-			text: i18n.ts._pages.variableNameIsAlreadyUsed,
-		});
-		return;
-	}
-
-	const id = uuid();
-	variables.push({ id, name, type: null });
-}
-
-function removeVariable(v) {
-	variables = variables.filter(x => x.name !== v.name);
-}
-
-function getPageBlockList() {
-	return [{
-		label: i18n.ts._pages.contentBlocks,
-		items: [
-			{ value: 'section', text: i18n.ts._pages.blocks.section },
-			{ value: 'text', text: i18n.ts._pages.blocks.text },
-			{ value: 'image', text: i18n.ts._pages.blocks.image },
-			{ value: 'textarea', text: i18n.ts._pages.blocks.textarea },
-			{ value: 'note', text: i18n.ts._pages.blocks.note },
-			{ value: 'canvas', text: i18n.ts._pages.blocks.canvas },
-		],
-	}, {
-		label: i18n.ts._pages.inputBlocks,
-		items: [
-			{ value: 'button', text: i18n.ts._pages.blocks.button },
-			{ value: 'radioButton', text: i18n.ts._pages.blocks.radioButton },
-			{ value: 'textInput', text: i18n.ts._pages.blocks.textInput },
-			{ value: 'textareaInput', text: i18n.ts._pages.blocks.textareaInput },
-			{ value: 'numberInput', text: i18n.ts._pages.blocks.numberInput },
-			{ value: 'switch', text: i18n.ts._pages.blocks.switch },
-			{ value: 'counter', text: i18n.ts._pages.blocks.counter },
-		],
-	}, {
-		label: i18n.ts._pages.specialBlocks,
-		items: [
-			{ value: 'if', text: i18n.ts._pages.blocks.if },
-			{ value: 'post', text: i18n.ts._pages.blocks.post },
-		],
-	}];
-}
-
-function getScriptBlockList(type: string = null) {
-	const list = [];
-
-	const blocks = blockDefs.filter(block => type == null || block.out == null || block.out === type || typeof block.out === 'number');
-
-	for (const block of blocks) {
-		const category = list.find(x => x.category === block.category);
-		if (category) {
-			category.items.push({
-				value: block.type,
-				text: i18n.t(`_pages.script.blocks.${block.type}`),
-			});
-		} else {
-			list.push({
-				category: block.category,
-				label: i18n.t(`_pages.script.categories.${block.category}`),
-				items: [{
-					value: block.type,
-					text: i18n.t(`_pages.script.blocks.${block.type}`),
-				}],
-			});
-		}
-	}
-
-	const userFns = variables.filter(x => x.type === 'fn');
-	if (userFns.length > 0) {
-		list.unshift({
-			label: i18n.t('_pages.script.categories.fn'),
-			items: userFns.map(v => ({
-				value: 'fn:' + v.name,
-				text: v.name,
-			})),
-		});
-	}
-
-	return list;
-}
-
 function setEyeCatchingImage(evt) {
 	selectFile(evt.currentTarget ?? evt.target, null).then(file => {
 		eyeCatchingImageId = file.id;
@@ -354,21 +196,7 @@ function removeEyeCatchingImage() {
 	eyeCatchingImageId = null;
 }
 
-function highlighter(code) {
-	return highlight(code, languages.js, 'javascript');
-}
-
 async function init() {
-	hpml = new HpmlTypeChecker();
-
-	watch($$(variables), () => {
-		hpml.variables = variables;
-	}, { deep: true });
-
-	watch($$(content), () => {
-		hpml.pageVars = collectPageVars(content);
-	}, { deep: true });
-
 	if (props.initPageId) {
 		page = await os.api('pages/show', {
 			pageId: props.initPageId,
@@ -389,26 +217,15 @@ async function init() {
 		currentName = page.name;
 		summary = page.summary;
 		font = page.font;
-		script = page.script;
 		hideTitleWhenPinned = page.hideTitleWhenPinned;
 		alignCenter = page.alignCenter;
-		content = page.content;
-		variables = page.variables;
+		text = page.text;
 		eyeCatchingImageId = page.eyeCatchingImageId;
-	} else {
-		const id = uuid();
-		content = [{
-			id,
-			type: 'text',
-			text: 'Hello World!',
-		}];
 	}
 }
 
 init();
 
-const headerActions = $computed(() => []);
-
 const headerTabs = $computed(() => [{
 	key: 'settings',
 	title: i18n.ts._pages.pageSetting,
@@ -417,14 +234,6 @@ const headerTabs = $computed(() => [{
 	key: 'contents',
 	title: i18n.ts._pages.contents,
 	icon: 'fas fa-sticky-note',
-}, {
-	key: 'variables',
-	title: i18n.ts._pages.variables,
-	icon: 'fas fa-magic',
-}, {
-	key: 'script',
-	title: i18n.ts.script,
-	icon: 'fas fa-code',
 }]);
 
 definePageMetadata(computed(() => {
@@ -450,82 +259,4 @@ definePageMetadata(computed(() => {
 		}
 	}
 }
-
-.gwbmwxkm {
-	position: relative;
-
-	> header {
-		> .title {
-			z-index: 1;
-			margin: 0;
-			padding: 0 16px;
-			line-height: 42px;
-			font-size: 0.9em;
-			font-weight: bold;
-			box-shadow: 0 1px rgba(#000, 0.07);
-
-			> i {
-				margin-right: 6px;
-			}
-
-			&:empty {
-				display: none;
-			}
-		}
-
-		> .buttons {
-			position: absolute;
-			z-index: 2;
-			top: 0;
-			right: 0;
-
-			> button {
-				padding: 0;
-				width: 42px;
-				font-size: 0.9em;
-				line-height: 42px;
-			}
-		}
-	}
-
-	> section {
-		padding: 0 32px 32px 32px;
-
-		@media (max-width: 500px) {
-			padding: 0 16px 16px 16px;
-		}
-
-		> .view {
-			display: inline-block;
-			margin: 16px 0 0 0;
-			font-size: 14px;
-		}
-
-		> .content {
-			margin-bottom: 16px;
-		}
-
-		> .eyeCatch {
-			margin-bottom: 16px;
-
-			> div {
-				> img {
-					max-width: 100%;
-				}
-			}
-		}
-	}
-}
-
-.qmuvgica {
-	padding: 16px;
-
-	> .variables {
-		margin-bottom: 16px;
-	}
-
-	> .add {
-		margin-bottom: 16px;
-	}
-}
 </style>
diff --git a/packages/client/src/scripts/collect-page-vars.ts b/packages/client/src/scripts/collect-page-vars.ts
deleted file mode 100644
index 16bb7aaa8..000000000
--- a/packages/client/src/scripts/collect-page-vars.ts
+++ /dev/null
@@ -1,48 +0,0 @@
-export function collectPageVars(content) {
-	const pageVars = [];
-	const collect = (xs: any[]) => {
-		for (const x of xs) {
-			if (x.type === 'textInput') {
-				pageVars.push({
-					name: x.name,
-					type: 'string',
-					value: x.default || '',
-				});
-			} else if (x.type === 'textareaInput') {
-				pageVars.push({
-					name: x.name,
-					type: 'string',
-					value: x.default || '',
-				});
-			} else if (x.type === 'numberInput') {
-				pageVars.push({
-					name: x.name,
-					type: 'number',
-					value: x.default || 0,
-				});
-			} else if (x.type === 'switch') {
-				pageVars.push({
-					name: x.name,
-					type: 'boolean',
-					value: x.default || false,
-				});
-			} else if (x.type === 'counter') {
-				pageVars.push({
-					name: x.name,
-					type: 'number',
-					value: 0,
-				});
-			} else if (x.type === 'radioButton') {
-				pageVars.push({
-					name: x.name,
-					type: 'string',
-					value: x.default || '',
-				});
-			} else if (x.children) {
-				collect(x.children);
-			}
-		}
-	};
-	collect(content);
-	return pageVars;
-}