Skip to content

Commit

Permalink
start rtl button
Browse files Browse the repository at this point in the history
  • Loading branch information
bastihilger committed Jan 9, 2022
1 parent 346a838 commit f6d427a
Show file tree
Hide file tree
Showing 6 changed files with 210,580 additions and 15 deletions.
79 changes: 78 additions & 1 deletion dist/css/field.css
Original file line number Diff line number Diff line change
@@ -1 +1,78 @@
.hljs{background:#282a36;display:block;overflow-x:auto;padding:.5em}.hljs-built_in,.hljs-link,.hljs-section,.hljs-selector-tag{color:#8be9fd}.hljs-keyword{color:#ff79c6}.hljs,.hljs-subst{color:#f8f8f2}.hljs-title{color:#50fa7b}.hljs-addition,.hljs-attr,.hljs-bullet,.hljs-meta,.hljs-name,.hljs-string,.hljs-symbol,.hljs-template-tag,.hljs-template-variable,.hljs-type,.hljs-variable{color:#f1fa8c}.hljs-comment,.hljs-deletion,.hljs-quote{color:#6272a4}.hljs-doctag,.hljs-keyword,.hljs-literal,.hljs-name,.hljs-section,.hljs-selector-tag,.hljs-strong,.hljs-title,.hljs-type{font-weight:700}.hljs-literal,.hljs-number{color:#bd93f9}.hljs-emphasis{font-style:italic}
/* Dracula Theme v1.2.5
*
* https://github.com/dracula/highlightjs
*
* Copyright 2016-present, All rights reserved
*
* Code licensed under the MIT license
*
* @author Denis Ciccale <[email protected]>
* @author Zeno Rocha <[email protected]>
*/
.hljs {
display: block;
overflow-x: auto;
padding: 0.5em;
background: #282a36;
}

.hljs-built_in,
.hljs-selector-tag,
.hljs-section,
.hljs-link {
color: #8be9fd;
}

.hljs-keyword {
color: #ff79c6;
}

.hljs,
.hljs-subst {
color: #f8f8f2;
}

.hljs-title {
color: #50fa7b;
}

.hljs-string,
.hljs-meta,
.hljs-name,
.hljs-type,
.hljs-attr,
.hljs-symbol,
.hljs-bullet,
.hljs-addition,
.hljs-variable,
.hljs-template-tag,
.hljs-template-variable {
color: #f1fa8c;
}

.hljs-comment,
.hljs-quote,
.hljs-deletion {
color: #6272a4;
}

.hljs-keyword,
.hljs-selector-tag,
.hljs-literal,
.hljs-title,
.hljs-section,
.hljs-doctag,
.hljs-type,
.hljs-name,
.hljs-strong {
font-weight: bold;
}

.hljs-literal,
.hljs-number {
color: #bd93f9;
}

.hljs-emphasis {
font-style: italic;
}
210,395 changes: 210,393 additions & 2 deletions dist/js/field.js

Large diffs are not rendered by default.

52 changes: 40 additions & 12 deletions resources/js/components/FormField.vue
Original file line number Diff line number Diff line change
Expand Up @@ -99,6 +99,14 @@
</text-align-buttons>
</template>

<template v-else-if="button == 'rtl'">
<rtl-button
:editor="editor"
:mode="mode"
>
</rtl-button>
</template>

<template v-else-if="button == 'history'">
<history-buttons
:editor="editor"
Expand Down Expand Up @@ -151,6 +159,7 @@
"
:style="cssProps"
v-show="mode == 'editor'"

>
<editor-content :editor="editor" />
</div>
Expand All @@ -169,28 +178,27 @@
</template>

<script>
import { Editor, EditorContent, VueNodeViewRenderer } from '@tiptap/vue-2';
import Text from '@tiptap/extension-text';
import Blockquote from '@tiptap/extension-blockquote';
import Bold from '@tiptap/extension-bold';
import BulletList from '@tiptap/extension-bullet-list';
import Code from '@tiptap/extension-code';
import Italic from '@tiptap/extension-italic';
import CodeBlock from '@tiptap/extension-code-block';
import CodeBlockLowlight from '@tiptap/extension-code-block-lowlight';
import Highlight from '@tiptap/extension-highlight';
import HorizontalRule from '@tiptap/extension-horizontal-rule';
import Italic from '@tiptap/extension-italic';
import Link from '@tiptap/extension-link';
import ListItem from '@tiptap/extension-list-item';
import OrderedList from '@tiptap/extension-ordered-list';
import Strike from '@tiptap/extension-strike';
import TextStyle from '@tiptap/extension-text-style';
import Underline from '@tiptap/extension-underline';
import Subscript from '@tiptap/extension-subscript';
import Superscript from '@tiptap/extension-superscript';
import Blockquote from '@tiptap/extension-blockquote';
import BulletList from '@tiptap/extension-bullet-list';
import OrderedList from '@tiptap/extension-ordered-list';
import ListItem from '@tiptap/extension-list-item';
import CodeBlock from '@tiptap/extension-code-block';
import CodeBlockLowlight from '@tiptap/extension-code-block-lowlight';
import HorizontalRule from '@tiptap/extension-horizontal-rule';
import TextStyle from '@tiptap/extension-text-style';
import Underline from '@tiptap/extension-underline';
import Heading from '@tiptap/extension-heading';
import TextAlign from '@tiptap/extension-text-align';
Expand All @@ -214,6 +222,7 @@ import NormalButton from './buttons/NormalButton';
import HeadingButtons from './buttons/HeadingButtons';
import TableButtons from './buttons/TableButtons';
import TextAlignButtons from './buttons/TextAlignButtons';
import RtlButton from './buttons/RtlButton';
import HistoryButtons from './buttons/HistoryButtons';
import ImageButton from './buttons/ImageButton';
import PlaceholderBlockButton from './buttons/PlaceholderBlockButton';
Expand Down Expand Up @@ -248,6 +257,7 @@ export default {
HeadingButtons,
TableButtons,
TextAlignButtons,
RtlButton,
HistoryButtons,
ImageButton,
PlaceholderBlockButton,
Expand Down Expand Up @@ -399,14 +409,32 @@ export default {
Heading.configure({
levels: this.headingLevels,
}).extend({
addAttributes() {
return {
...this.parent?.(),
dir: {
default: 'auto',
},
}
}
}),
Blockquote,
BulletList,
HorizontalRule,
ListItem,
OrderedList,
HardBreak,
Paragraph,
Paragraph.extend({
addAttributes() {
return {
...this.parent?.(),
dir: {
default: 'auto',
},
}
}
}),
Table.configure({
resizable: true,
}),
Expand Down
2 changes: 2 additions & 0 deletions resources/js/components/buttons/BaseButton.vue
Original file line number Diff line number Diff line change
Expand Up @@ -51,6 +51,7 @@ import { library } from '@fortawesome/fontawesome-svg-core';
import {
faHorizontalRule,
faParagraphRtl,
faImagePolaroid
} from '@fortawesome/pro-solid-svg-icons';
Expand Down Expand Up @@ -99,6 +100,7 @@ library.add(
faLink,
faListOl,
faListUl,
faParagraphRtl,
faQuoteRight,
faRedoAlt,
faStrikethrough,
Expand Down
41 changes: 41 additions & 0 deletions resources/js/components/buttons/RtlButton.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,41 @@
<template>
<span class="whitespace-nowrap">
<base-button
:isActive="rtlIsActive()"
:isDisabled="mode != 'editor'"
:clickMethod="toggleRtl"
:title="'RTL'"
:icon="['fas', 'paragraph-rtl']"
>
</base-button>
</span>
</template>

<script>
import BaseButton from './BaseButton.vue';
export default {
props: ['alignments', 'alignElements', 'defaultAlignment', 'editor', 'mode'],
components: {
BaseButton,
},
methods: {
rtlIsActive() {
return this.editor ? this.editor.isActive({ dir: 'rtl' }) : false;
},
toggleRtl() {
if (this.rtlIsActive()) {
this.editor.chain().focus().updateAttributes('paragraph', { dir: 'auto' }).run();
} else {
this.editor.chain().focus().updateAttributes('paragraph', { dir: 'rtl' }).run();
this.editor.chain().focus().updateAttributes('heading', { dir: 'rtl' }).run();
}
}
}
}
</script>
26 changes: 26 additions & 0 deletions resources/js/extensions/AutoDir.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
import { Extension } from '@tiptap/core'

export default Extension.create({
name: 'AutoDir',
addGlobalAttributes() {
return [
{
types: [
'heading',
'paragraph',
'bulletList',
'orderedList',
'blockquote',
],
attributes: {
autoDir: {
renderHTML: attributes => ({
dir: 'rtl',
}),
parseHTML: element => element.dir || 'rtl',
},
},
},
]
},
})

0 comments on commit f6d427a

Please sign in to comment.