STEMMechanics/Website
1
0
Fork 0
Code Issues 4 Pull Requests 1 Actions Packages Projects Releases 3 Wiki Activity

editor expansion

Browse Source
This commit is contained in:
James Collins
2023-07-07 22:54:34 +10:00
parent 936aabf412
commit 1c6a5c9d04
6 changed files with 549 additions and 189 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
package-lock.json generated
View File

@@ -5,6 +5,8 @@
"packages": {
"": {
"dependencies": {
"@tiptap/extension-text-align": "^2.0.3",
"@tiptap/extension-underline": "^2.0.3",
"@tiptap/pm": "^2.0.3",
"@tiptap/starter-kit": "^2.0.3",
"@tiptap/vue-3": "^2.0.3",
@@ -1632,6 +1634,30 @@
"@tiptap/core": "^2.0.0"
}
},
"node_modules/@tiptap/extension-text-align": {
"version": "2.0.3",
"resolved": "https://registry.npmjs.org/@tiptap/extension-text-align/-/extension-text-align-2.0.3.tgz",
"integrity": "sha512-VlLgqncKdjMjVjbU60/ALYhFs0wUdjAyvjDXnH1OoM/HuzbILvufPMYz4DUieJIWVJOYUKHQgg4XwBWceAM2Tw==",
"funding": {
"type": "github",
"url": "https://github.com/sponsors/ueberdosis"
},
"peerDependencies": {
"@tiptap/core": "^2.0.0"
}
},
"node_modules/@tiptap/extension-underline": {
"version": "2.0.3",
"resolved": "https://registry.npmjs.org/@tiptap/extension-underline/-/extension-underline-2.0.3.tgz",
"integrity": "sha512-oMYa7qib/5wJjpUp79GZEe+E/iyf1oZBsgiG26IspEtVTHZmpn3+Ktud7l43y/hpTeEzFTKOF1/uVbayHtSERg==",
"funding": {
"type": "github",
"url": "https://github.com/sponsors/ueberdosis"
},
"peerDependencies": {
"@tiptap/core": "^2.0.0"
}
},
"node_modules/@tiptap/pm": {
"version": "2.0.3",
"resolved": "https://registry.npmjs.org/@tiptap/pm/-/pm-2.0.3.tgz",

2
package.json
View File

@@ -31,6 +31,8 @@
"vitest": "^0.32.0"
},
"dependencies": {
"@tiptap/extension-text-align": "^2.0.3",
"@tiptap/extension-underline": "^2.0.3",
"@tiptap/pm": "^2.0.3",
"@tiptap/starter-kit": "^2.0.3",
"@tiptap/vue-3": "^2.0.3",

15
resources/js/components/SMDropdown.vue
View File

@@ -29,6 +29,7 @@
'px-4',
'pt-5',
'flex-1',
'bg-white',
{ 'bg-gray-1': disabled },
]"
v-bind="{
@@ -121,21 +122,21 @@ const label = ref(
? props.label
: typeof props.control == "string"
? toTitleCase(props.control)
: ""
: "",
);
const value = ref(
props.modelValue != undefined
? props.modelValue
: control != null
? control.value
: ""
: "",
);
const id = ref(
props.id != undefined
? props.id
: typeof props.control == "string" && props.control.length > 0
? props.control
: generateRandomElementId()
: generateRandomElementId(),
);
const active = ref(value.value?.toString().length ?? 0 > 0);
const focused = ref(false);
@@ -145,7 +146,7 @@ watch(
() => value.value,
(newValue) => {
active.value = newValue.toString().length > 0 || focused.value == true;
}
},
);
if (props.modelValue != undefined) {
@@ -153,7 +154,7 @@ if (props.modelValue != undefined) {
() => props.modelValue,
(newValue) => {
value.value = newValue;
}
},
);
}
@@ -161,7 +162,7 @@ watch(
() => props.disabled,
(newValue) => {
disabled.value = newValue;
}
},
);
if (typeof control === "object" && control !== null) {
@@ -170,7 +171,7 @@ if (typeof control === "object" && control !== null) {
(newValue) => {
value.value = newValue;
},
{ deep: true }
{ deep: true },
);
}

511
resources/js/components/SMEditor.vue
View File

@@ -1,18 +1,83 @@
<template>
<div class="sm-editor">
<div class="sm-html">
<div
v-if="editor"
class="flex bg-white p-1 border-t border-x border-gray rounded-t-2">
class="flex bg-white border-t border-x border-gray rounded-t-2">
<button
@click.prevent="editor.chain().focus().toggleInfo().run()"
:class="[
'flex',
'flex-items-center',
'p-1',
'hover-bg-gray-3',
editor.isActive('info')
? ['bg-sky-6', 'text-white']
: ['bg-white', 'text-gray-6'],
]">
III
</button>
<div class="flex px-1 border-r border-gray relative">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 -960 960 960"
class="absolute right-1 top-1.5 h-6 pointer-events-none">
<path
d="M480-360 280-559h400L480-360Z"
fill="currentColor" />
</svg>
<select
class="appearance-none pl-3 pr-7 text-xs outline-none select-none bg-white"
@change="updateNode">
<option
value="paragraph"
:selected="editor.isActive('paragraph')">
Paragraph
</option>
<option
value="h1"
:selected="editor.isActive('heading', { level: 1 })">
Heading 1
</option>
<option
value="h2"
:selected="editor.isActive('heading', { level: 2 })">
Heading 2
</option>
<option
value="h3"
:selected="editor.isActive('heading', { level: 3 })">
Heading 3
</option>
<option
value="h4"
:selected="editor.isActive('heading', { level: 4 })">
Heading 4
</option>
<option
value="h5"
:selected="editor.isActive('heading', { level: 5 })">
Heading 5
</option>
<option
value="h6"
:selected="editor.isActive('heading', { level: 6 })">
Heading 6
</option>
</select>
</div>
<div class="flex p-1 border-r border-gray">
<button
@click.prevent="editor.chain().focus().toggleBold().run()"
:disabled="!editor.can().chain().focus().toggleBold().run()"
title="bold"
:class="[
'flex',
'flex-items-center',
'p-1',
'hover-bg-gray-3',
editor.isActive('bold')
? ['bg-sky-6', 'text-white']
: ['bg-white', 'text-gray-6'],
'p-1',
'hover-bg-gray-3',
]">
<svg
xmlns="http://www.w3.org/2000/svg"
@@ -25,132 +90,298 @@
</button>
<button
@click.prevent="editor.chain().focus().toggleItalic().run()"
:disabled="!editor.can().chain().focus().toggleItalic().run()"
:class="{ 'is-active': editor.isActive('italic') }">
italic
:disabled="
!editor.can().chain().focus().toggleItalic().run()
"
title="italic"
:class="[
'flex',
'flex-items-center',
'p-1',
'hover-bg-gray-3',
editor.isActive('italic')
? ['bg-sky-6', 'text-white']
: ['bg-white', 'text-gray-6'],
]">
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-5 w-5"
viewBox="0 0 24 24">
<path
d="M10,4V7H12.21L8.79,15H6V18H14V15H11.79L15.21,7H18V4H10Z"
fill="currentColor" />
</svg>
</button>
<button
@click.prevent="
editor.chain().focus().toggleUnderline().run()
"
:disabled="
!editor.can().chain().focus().toggleUnderline().run()
"
title="underline"
:class="[
'flex',
'flex-items-center',
'p-1',
'hover-bg-gray-3',
editor.isActive('underline')
? ['bg-sky-6', 'text-white']
: ['bg-white', 'text-gray-6'],
]">
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-4 w-5"
viewBox="0 0 24 24">
<title>format-underline</title>
<path
d="M5,21H19V19H5V21M12,17A6,6 0 0,0 18,11V3H15.5V11A3.5,3.5 0 0,1 12,14.5A3.5,3.5 0 0,1 8.5,11V3H6V11A6,6 0 0,0 12,17Z"
fill="currentColor" />
</svg>
</button>
<button
@click.prevent="editor.chain().focus().toggleStrike().run()"
:disabled="!editor.can().chain().focus().toggleStrike().run()"
:class="{ 'is-active': editor.isActive('strike') }">
strike
</button>
<button
@click.prevent="editor.chain().focus().toggleCode().run()"
:disabled="!editor.can().chain().focus().toggleCode().run()"
:class="{ 'is-active': editor.isActive('code') }">
code
</button>
<button
@click.prevent="editor.chain().focus().unsetAllMarks().run()">
clear marks
</button>
<button @click.prevent="editor.chain().focus().clearNodes().run()">
clear nodes
</button>
<button
@click.prevent="editor.chain().focus().setParagraph().run()"
:class="{ 'is-active': editor.isActive('paragraph') }">
paragraph
:disabled="
!editor.can().chain().focus().toggleStrike().run()
"
title="strike"
:class="[
'flex',
'flex-items-center',
'p-1',
'hover-bg-gray-3',
editor.isActive('strike')
? ['bg-sky-6', 'text-white']
: ['bg-white', 'text-gray-6'],
]">
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-4 w-5"
viewBox="0 0 24 24">
<title>format-strikethrough-variant</title>
<path
d="M23,12V14H18.61C19.61,16.14 19.56,22 12.38,22C4.05,22.05 4.37,15.5 4.37,15.5L8.34,15.55C8.37,18.92 11.5,18.92 12.12,18.88C12.76,18.83 15.15,18.84 15.34,16.5C15.42,15.41 14.32,14.58 13.12,14H1V12H23M19.41,7.89L15.43,7.86C15.43,7.86 15.6,5.09 12.15,5.08C8.7,5.06 9,7.28 9,7.56C9.04,7.84 9.34,9.22 12,9.88H5.71C5.71,9.88 2.22,3.15 10.74,2C19.45,0.8 19.43,7.91 19.41,7.89Z"
fill="currentColor" />
</svg>
</button>
</div>
<div class="flex p-1 border-r border-gray">
<button
@click.prevent="
editor.chain().focus().toggleHeading({ level: 1 }).run()
editor.chain().focus().toggleBulletList().run()
"
:class="{
'is-active': editor.isActive('heading', { level: 1 }),
}">
h1
</button>
<button
@click.prevent="
editor.chain().focus().toggleHeading({ level: 2 }).run()
"
:class="{
'is-active': editor.isActive('heading', { level: 2 }),
}">
h2
</button>
<button
@click.prevent="
editor.chain().focus().toggleHeading({ level: 3 }).run()
"
:class="{
'is-active': editor.isActive('heading', { level: 3 }),
}">
h3
</button>
<button
@click.prevent="
editor.chain().focus().toggleHeading({ level: 4 }).run()
"
:class="{
'is-active': editor.isActive('heading', { level: 4 }),
}">
h4
</button>
<button
@click.prevent="
editor.chain().focus().toggleHeading({ level: 5 }).run()
"
:class="{
'is-active': editor.isActive('heading', { level: 5 }),
}">
h5
</button>
<button
@click.prevent="
editor.chain().focus().toggleHeading({ level: 6 }).run()
"
:class="{
'is-active': editor.isActive('heading', { level: 6 }),
}">
h6
</button>
<button
@click.prevent="editor.chain().focus().toggleBulletList().run()"
:class="{ 'is-active': editor.isActive('bulletList') }">
bullet list
title="bullet list"
:class="[
'flex',
'flex-items-center',
'p-1',
'hover-bg-gray-3',
editor.isActive('bulletList')
? ['bg-sky-6', 'text-white']
: ['bg-white', 'text-gray-6'],
]">
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-4 w-5"
viewBox="0 0 24 24">
<path
d="M7,5H21V7H7V5M7,13V11H21V13H7M4,4.5A1.5,1.5 0 0,1 5.5,6A1.5,1.5 0 0,1 4,7.5A1.5,1.5 0 0,1 2.5,6A1.5,1.5 0 0,1 4,4.5M4,10.5A1.5,1.5 0 0,1 5.5,12A1.5,1.5 0 0,1 4,13.5A1.5,1.5 0 0,1 2.5,12A1.5,1.5 0 0,1 4,10.5M7,19V17H21V19H7M4,16.5A1.5,1.5 0 0,1 5.5,18A1.5,1.5 0 0,1 4,19.5A1.5,1.5 0 0,1 2.5,18A1.5,1.5 0 0,1 4,16.5Z"
fill="currentColor" />
</svg>
</button>
<button
@click.prevent="
editor.chain().focus().toggleOrderedList().run()
"
:class="{ 'is-active': editor.isActive('orderedList') }">
ordered list
title="ordered list"
:class="[
'flex',
'flex-items-center',
'p-1',
'hover-bg-gray-3',
editor.isActive('orderedList')
? ['bg-sky-6', 'text-white']
: ['bg-white', 'text-gray-6'],
]">
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-4 w-5"
viewBox="0 0 24 24">
<title>format-list-numbered</title>
<path
d="M7,13V11H21V13H7M7,19V17H21V19H7M7,7V5H21V7H7M3,8V5H2V4H4V8H3M2,17V16H5V20H2V19H4V18.5H3V17.5H4V17H2M4.25,10A0.75,0.75 0 0,1 5,10.75C5,10.95 4.92,11.14 4.79,11.27L3.12,13H5V14H2V13.08L4,11H2V10H4.25Z"
fill="currentColor" />
</svg>
</button>
</div>
<div class="flex p-1 border-r border-gray">
<button
@click.prevent="
editor.chain().focus().toggleCodeBlock().run()
"
title="code block"
:class="[
'flex',
'flex-items-center',
'p-1',
'hover-bg-gray-3',
editor.isActive('codeBlock')
? ['bg-sky-6', 'text-white']
: ['bg-white', 'text-gray-6'],
]">
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-5 w-5"
viewBox="0 0 24 24">
<path
d="M14.6,16.6L19.2,12L14.6,7.4L16,6L22,12L16,18L14.6,16.6M9.4,16.6L4.8,12L9.4,7.4L8,6L2,12L8,18L9.4,16.6Z"
fill="currentColor" />
</svg>
</button>
<button
@click.prevent="editor.chain().focus().toggleCodeBlock().run()"
:class="{ 'is-active': editor.isActive('codeBlock') }">
code block
</button>
<button
@click.prevent="editor.chain().focus().toggleBlockquote().run()"
:class="{ 'is-active': editor.isActive('blockquote') }">
blockquote
@click.prevent="
editor.chain().focus().toggleBlockquote().run()
"
title="blockquote"
:class="[
'flex',
'flex-items-center',
'p-1',
'hover-bg-gray-3',
editor.isActive('blockquote')
? ['bg-sky-6', 'text-white']
: ['bg-white', 'text-gray-6'],
]">
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-5 w-5"
viewBox="0 0 24 24">
<path
d="M10,7L8,11H11V17H5V11L7,7H10M18,7L16,11H19V17H13V11L15,7H18Z"
fill="currentColor" />
</svg>
</button>
<button
@click.prevent="
editor.chain().focus().setHorizontalRule().run()
">
horizontal rule
"
title="horizontal rule"
:class="[
'flex',
'flex-items-center',
'p-1',
'bg-white',
'hover-bg-gray-3',
]">
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-5 w-5"
viewBox="0 0 24 24">
<path d="M19,13H5V11H19V13Z" fill="currentColor" />
</svg>
</button>
</div>
<div class="flex p-1 border-r border-gray">
<button
@click.prevent="editor.chain().focus().setHardBreak().run()"
title="hard break"
:class="[
'flex',
'flex-items-center',
'p-1',
'hover-bg-gray-3',
'bg-white',
]">
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-5 w-5"
viewBox="0 0 24 24">
<path
d="M10,11A4,4 0 0,1 6,7A4,4 0 0,1 10,3H18V5H16V21H14V5H12V21H10V11Z"
fill="currentColor" />
</svg>
</button>
<button
@click.prevent="editor.chain().focus().setHardBreak().run()">
hard break
@click.prevent="
editor.chain().focus().unsetAllMarks().run();
editor.chain().focus().clearNodes().run();
"
title="Clear formatting"
:class="[
'flex',
'flex-items-center',
'p-1',
'hover-bg-gray-3',
'bg-white',
]">
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-5 w-5"
viewBox="0 0 24 24">
<path
d="M6,5V5.18L8.82,8H11.22L10.5,9.68L12.6,11.78L14.21,8H20V5H6M3.27,5L2,6.27L8.97,13.24L6.5,19H9.5L11.07,15.34L16.73,21L18,19.73L3.55,5.27L3.27,5Z"
fill="currentColor" />
</svg>
</button>
</div>
<div class="flex p-1">
<button
@click.prevent="editor.chain().focus().undo().run()"
:disabled="!editor.can().chain().focus().undo().run()">
undo
title="Undo"
:disabled="!editor.can().chain().focus().undo().run()"
:class="[
'flex',
'flex-items-center',
'p-1',
'hover-bg-gray-3',
'bg-white',
[
'disabled-text-gray',
'hover-disabled-bg-transparent',
'disabled-cursor-not-allowed',
],
]">
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-5 w-5"
viewBox="0 0 24 24">
<title>undo</title>
<path
d="M12.5,8C9.85,8 7.45,9 5.6,10.6L2,7V16H11L7.38,12.38C8.77,11.22 10.54,10.5 12.5,10.5C16.04,10.5 19.05,12.81 20.1,16L22.47,15.22C21.08,11.03 17.15,8 12.5,8Z"
fill="currentColor" />
</svg>
</button>
<button
@click.prevent="editor.chain().focus().redo().run()"
:disabled="!editor.can().chain().focus().redo().run()">
redo
title="Redo"
:disabled="!editor.can().chain().focus().redo().run()"
:class="[
'flex',
'flex-items-center',
'p-1',
'hover-bg-gray-3',
'bg-white',
[
'disabled-text-gray',
'hover-disabled-bg-transparent',
'disabled-cursor-not-allowed',
],
]">
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-5 w-5"
viewBox="0 0 24 24">
<title>redo</title>
<path
d="M18.4,10.6C16.55,9 14.15,8 11.5,8C6.85,8 2.92,11.03 1.54,15.22L3.9,16C4.95,12.81 7.95,10.5 11.5,10.5C13.45,10.5 15.23,11.22 16.62,12.38L13,16H22V7L18.4,10.6Z"
fill="currentColor" />
</svg>
</button>
</div>
<EditorContent :editor="editor" />
</div>
<EditorContent
:editor="editor"
class="rounded-b-2 bg-white p-4 border-1 border-gray h-128 overflow-auto sm-editor" />
</div>
</template>
@@ -158,6 +389,9 @@
import { onBeforeUnmount, watch } from "vue";
import { useEditor, EditorContent } from "@tiptap/vue-3";
import StarterKit from "@tiptap/starter-kit";
import Underline from "@tiptap/extension-underline";
import TextAlign from "@tiptap/extension-text-align";
import { Info } from "../extensions/info";
const props = defineProps({
modelValue: {
@@ -170,12 +404,40 @@ const emits = defineEmits(["update:modelValue"]);
const editor = useEditor({
content: props.modelValue,
extensions: [StarterKit],
extensions: [StarterKit, Underline, TextAlign, Info],
onUpdate: () => {
emits("update:modelValue", editor.value.getHTML());
},
});
const updateNode = (event) => {
if (event.target.value) {
switch (event.target.value) {
case "paragraph":
editor.value.chain().focus().setParagraph().run();
break;
case "h1":
editor.value.chain().focus().setHeading({ level: 1 }).run();
break;
case "h2":
editor.value.chain().focus().setHeading({ level: 2 }).run();
break;
case "h3":
editor.value.chain().focus().setHeading({ level: 3 }).run();
break;
case "h4":
editor.value.chain().focus().setHeading({ level: 4 }).run();
break;
case "h5":
editor.value.chain().focus().setHeading({ level: 5 }).run();
break;
case "h6":
editor.value.chain().focus().setHeading({ level: 6 }).run();
break;
}
}
};
onBeforeUnmount(() => {
editor.value.destroy();
});
@@ -193,46 +455,3 @@ watch(
},
);
</script>
<style lang="scss">
.sm-editor {
.toolbar {
// display: flex;
// border-width: 1px 1px 0 1px;
// border-radius: 0.5rem 0.5rem 0 0;
// border-color: rgba(156, 163, 175, 1);
// background-color: rgba(255, 255, 255, 1);
button {
display: flex;
background-color: rgba(255, 255, 255, 1);
color: rgba(75, 85, 99, 1);
padding: 0.25rem;
margin: 0.25rem;
background-color: rgba(255, 255, 255, 1);
svg {
height: 1.2rem;
width: 1.2rem;
}
}
button.is-active {
background-color: red;
}
}
.ProseMirror {
border-width: 1px;
border-radius: 0 0 0.5rem 0.5rem;
border-color: rgba(156, 163, 175, 0.5) rgba(156, 163, 175, 1)
rgba(156, 163, 175, 1);
color: rgba(75, 85, 99, 1);
padding: 1rem;
background-color: rgba(255, 255, 255, 1);
height: 24rem;
overflow: scroll;
outline: none;
}
}
</style>

60
resources/js/extensions/info.ts Normal file
View File

@@ -0,0 +1,60 @@
import { mergeAttributes, Node } from "@tiptap/core";
export interface InfoOptions {
HTMLAttributes: Record<string, any>;
}
declare module "@tiptap/core" {
interface Commands<ReturnType> {
info: {
/**
* Toggle a paragraph
*/
setInfo: () => ReturnType;
toggleInfo: () => ReturnType;
};
}
}
export const Info = Node.create<InfoOptions>({
name: "info",
priority: 1000,
addOptions() {
return {
HTMLAttributes: { class: "info" },
};
},
group: "block",
content: "inline*",
parseHTML() {
return [{ tag: "p", class: "info" }];
},
renderHTML({ HTMLAttributes }) {
return [
"p",
mergeAttributes(this.options.HTMLAttributes, HTMLAttributes),
0,
];
},
addCommands() {
return {
setInfo:
() =>
({ commands }) => {
return commands.setNode(this.name);
},
toggleInfo:
() =>
({ commands }) => {
return commands.toggleNode(this.name, "paragraph");
},
};
},
});

52
resources/views/app.blade.php
View File

@@ -38,6 +38,58 @@
.scrollbar-width-none { scrollbar-width: none; }
.scrollbar-width-none::-webkit-scrollbar { display: none; }
.spin{animation:rotate 1s infinite linear}
.sm-html .ProseMirror {
outline: none;
}
.sm-html hr {
border-top: 1px solid #aaa;
margin: 1.5rem 0;
}
.sm-html pre {
padding: 0 1rem;
line-height: 1rem;
}
.sm-html blockquote {
border-left: 4px solid #ddd;
margin-left: 1rem;
padding-left: 1rem;
}
.sm-html p.info {
display: flex;
border: 1px solid rgba(14,165,233,1);
background-color: rgba(14,165,233,0.25);
border-radius: 0.5rem;
padding: 0.5rem 1rem 0.5rem 0.75rem;
margin: 0.5rem;
font-size: 80%;
}
.sm-html p.info::before {
content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' %3E%3Cpath d='M11,9H13V7H11M12,20C7.59,20 4,16.41 4,12C4,7.59 7.59,4 12,4C16.41,4 20,7.59 20,12C20,16.41 16.41,20 12,20M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M11,17H13V11H11V17Z' fill='currentColor' /%3E%3C/svg%3E");
display: inline-block;
color: rgba(14,165,233,1);
width: 1.5rem;
height: 1.5rem;
margin-right: 0.5rem;
margin-top: 0.1rem;
}
.sm-editor::-webkit-scrollbar {
background-color: transparent;
width: 16px;
}
.sm-editor::-webkit-scrollbar-thumb {
background-color: #aaa;
border: 4px solid transparent;
border-radius: 8px;
background-clip: padding-box;
}
@keyframes rotate{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}
</style>
</head>