Skip to content

Commit

Permalink
#326 wip editor toolbar
Browse files Browse the repository at this point in the history
  • Loading branch information
@wouter-adriaens
wouter-adriaens committed Oct 3, 2024
1 parent 124c635 commit a551f8a
Show file tree
Hide file tree
Showing 4 changed files with 166 additions and 64 deletions.
216 changes: 152 additions & 64 deletions src/components/dumb/OeEditor.vue
View file
Original file line number Diff line number Diff line change
@@ -1,60 +1,86 @@
<template>
<div id="toolbar">
<button class="ql-undo" title="Undo">
<font-awesome-icon :icon="['fas', 'rotate-left']" />
</button>
<button class="ql-redo" title="Redo">
<font-awesome-icon :icon="['fas', 'rotate-right']" />
</button>
<!-- Add headings dropdown -->
<span class="ql-formats">
<select class="ql-header">
<option value="">Normal</option>
<option value="1">Heading 1</option>
<option value="2">Heading 2</option>
<option value="3">Heading 3</option>
<option value="4">Heading 4</option>
<option value="5">Heading 5</option>
<option value="6">Heading 6</option>
</select>
</span>
<!-- Add a bold button -->
<button class="ql-bold"></button>
<!-- Add subscript and superscript buttons -->
<button class="ql-private" title="Prive">
<font-awesome-icon :icon="['fas', 'lock']" />
</button>

<button class="ql-list" value="ordered"></button>
<button class="ql-list" value="bullet"></button>
</div>
<div>
<div id="toolbar">
<div class="toolbar-group">
<button class="ql-undo" title="Undo">
<font-awesome-icon :icon="['fas', 'rotate-left']" />
</button>
<button class="ql-redo" title="Redo">
<font-awesome-icon :icon="['fas', 'rotate-right']" />
</button>

<span class="ql-stroke" />

<!-- Add headings dropdown -->
<select class="ql-header">
<option value="">Paragraph</option>
<option value="1">Heading 1</option>
<option value="2">Heading 2</option>
<option value="3">Heading 3</option>
<option value="4">Heading 4</option>
<option value="5">Heading 5</option>
<option value="6">Heading 6</option>
</select>

<span class="ql-stroke" />

<!-- Add a bold button -->
<button class="ql-bold"></button>
<button class="ql-italic"></button>

<span class="ql-stroke" />

<button class="ql-list" value="ordered"></button>
<button class="ql-list" value="bullet"></button>
<button class="ql-indent" value="-1"></button>
<button class="ql-indent" value="+1"></button>

<span class="ql-stroke" />

<button class="ql-clean"></button>

<span class="ql-stroke" />

<button class="ql-private" title="Prive">
<font-awesome-icon :icon="['fas', 'lock']" />
</button>
</div>
</div>

<QuillyEditor ref="editor" v-model="model" style="height: 400px" :options="options" />
<QuillyEditor
ref="editor"
v-model="model"
style="height: 400px"
:options="options"
@blur="model = quill?.getSemanticHTML()"
/>

<br />
<h5>Output</h5>
<br />
<pre>{{ model }}</pre>
</div>
</template>

<script setup lang="ts">
import 'quill/dist/quill.snow.css';
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
import Quill from 'quill';
import { htmlEditButton } from 'quill-html-edit-button';
import Block from 'quill/blots/block';
import QuillToggleFullscreenButton from 'quill-toggle-fullscreen-button';
import { onMounted, ref } from 'vue';
import { QuillyEditor } from 'vue-quilly';
import { PrivateBlock } from '@models/editor';
class PrivateBlock extends Block {
static tagName = 'DIV';
static className = 'prive';
static blotName = 'private';
}
// Register custom blocks and modules
Quill.register(PrivateBlock, true);
const editor = ref<InstanceType<typeof QuillyEditor>>();
let quill: Quill | null = null;
Quill.register('modules/htmlEditButton', htmlEditButton);
Quill.register('modules/toggleFullscreen', QuillToggleFullscreenButton);
const model = ref('<p>Hello Quilly!</p>');
// Quill config
let quill: Quill;
const editor = ref<InstanceType<typeof QuillyEditor>>();
const options = {
theme: 'snow',
modules: {
Expand All @@ -72,44 +98,55 @@ const options = {
},
},
},
// toolbar: {
// container: [
// [{ header: '1' }, { header: '2' }, { font: [] }],
// [{ size: [] }],
// ['bold', 'italic', 'underline', 'strike', 'blockquote'],
// [{ list: 'ordered' }, { list: 'bullet' }, { indent: '-1' }, { indent: '+1' }],
// ['link', 'image', 'video'],
// ['undo', 'redo'],
// ['clean'],
// ['lock'],
// ],
// handlers: {
// undo: () => {
// return quill!.history.undo();
// },
// redo: () => {
// return quill!.history.redo();
// },
// },
// },
history: {
delay: 2000,
maxStack: 500,
userOnly: true,
},
htmlEditButton: {},
htmlEditButton: {
buttonTitle: 'Source code',
msg: 'Source code',
okText: 'Opslaan',
cancelText: 'Annuleren',
},
toggleFullscreen: {
buttonTitle: 'Fullscreen',
},
},
placeholder: 'Compose an epic...',
readOnly: false,
};
// Model
const model = ref('<p>Hello Quilly!</p>');
onMounted(() => {
quill = editor.value?.initialize(Quill) as Quill;
});
</script>

<style lang="scss" scoped>
.ql-toolbar {
display: flex;
justify-content: space-between;
:deep(.ql-formats) {
margin-right: 0;
}
.toolbar-group {
display: flex;
width: 100%;
.ql-stroke {
margin: -8px 8px;
width: 1px; /* Line thickness */
display: inline-block;
background-color: #ccc; /* Line color */
}
}
}
.ql-container {
font-size: 16px;
Expand All @@ -129,4 +166,55 @@ onMounted(() => {
margin: 1rem 0;
}
}
:global(.ql-html-textArea.ql-container) {
position: relative !important;
left: 0 !important;
height: calc(100% - 30px) !important;
width: 100%;
}
:global(.ql-html-buttonGroup) {
position: relative !important;
left: unset !important;
bottom: 0 !important;
transform: scale(1) !important;
display: flex;
align-items: center;
justify-content: flex-end;
margin-top: 15px;
}
:global(.ql-html-buttonOk),
:global(.ql-html-buttonCancel) {
border-radius: 0;
-moz-appearance: none;
appearance: none;
-webkit-appearance: none;
border: 0;
background-color: transparent;
padding: 0;
display: inline-flex;
align-items: center;
min-height: 3.5rem;
font-size: 1.6rem;
font-family: Flanders Art Sans, sans-serif;
font-weight: 500;
padding: 0.5rem 2rem;
background-color: var(--vl-theme-action-color, #944ea1);
text-decoration: none;
border-radius: 0.3rem;
color: #fff;
text-align: center;
outline: 0;
max-width: 100%;
cursor: pointer;
}
:global(.ql-html-buttonCancel) {
background-color: transparent;
color: var(--vl-theme-action-color, #944ea1);
border: 0.2rem solid currentColor;
transition: color 0.2s, border-color 0.2s, box-shadow 0.2s;
}
</style>
2 changes: 2 additions & 0 deletions src/components/dumb/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ import OeAutocomplete from './OeAutocomplete.vue';
import OeButton from './OeButton.vue';
import OeContainer from './OeContainer.vue';
import OeDatepicker from './OeDatepicker.vue';
import OeEditor from './OeEditor.vue';
import OeGrid from './OeGrid.vue';
import OeHeader from './OeHeader.vue';
import OeInventarisLoadedLink from './OeInventarisLoadedLink.vue';
Expand Down Expand Up @@ -40,6 +41,7 @@ export {
OeButton,
OeContainer,
OeDatepicker,
OeEditor,
OeGrid,
OeHeader,
OeInventarisLoadedLink,
Expand Down
7 changes: 7 additions & 0 deletions src/models/editor.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
import Block from 'quill/blots/block';

export class PrivateBlock extends Block {
static tagName = 'DIV';
static className = 'prive';
static blotName = 'private';
}
5 changes: 5 additions & 0 deletions yarn.lock
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8930,6 +8930,11 @@ quill-html-edit-button@^3.0.0:
resolved "https://registry.yarnpkg.com/quill-html-edit-button/-/quill-html-edit-button-3.0.0.tgz#b632ae6a5d473ce42f1ad3223e91aff02fe13464"
integrity sha512-ZUV3rYjEvXz+v/7f8N0Mkp2+0D8VGDj6yCYPfagSLmyshczeMawS7vZJzaJ18dJp35IfjiPnzqyVk3KCI8qN1w==

quill-toggle-fullscreen-button@^0.1.3:
version "0.1.3"
resolved "https://registry.yarnpkg.com/quill-toggle-fullscreen-button/-/quill-toggle-fullscreen-button-0.1.3.tgz#ee8c6d0e43a94115228dd2a694bcf82cd33702b1"
integrity sha512-ViRGh3pRxSSe4uNZZpy0LI23A9wAAeCuTmUwz22E/f1dSDmDGvroObomg56HpwbednDCyTvEyWb0gakY2ml7oQ==

quill@^2.0.2:
version "2.0.2"
resolved "https://registry.yarnpkg.com/quill/-/quill-2.0.2.tgz#5b26bc10a74e9f7fdcfdb5156b3133a3ebf0a814"
Expand Down

0 comments on commit a551f8a

Please sign in to comment.