', '
');}; + cm.setOption('extraKeys', extraKeys); + + // Update data on content change + cm.on('change', (instance, changeObj) => { + this.updateAndRender(); + }); + + // Handle scroll to sync display view + cm.on('scroll', instance => { + // Thanks to http://liuhao.im/english/2015/11/10/the-sync-scroll-of-markdown-editor-in-javascript.html + let scroll = instance.getScrollInfo(); + let atEnd = scroll.top + scroll.clientHeight === scroll.height; + if (atEnd) { + this.onMarkdownScroll(-1); + return; + } + + let lineNum = instance.lineAtHeight(scroll.top, 'local'); + let range = instance.getRange({line: 0, ch: null}, {line: lineNum, ch: null}); + let parser = new DOMParser(); + let doc = parser.parseFromString(this.markdown.render(range), 'text/html'); + let totalLines = doc.documentElement.querySelectorAll('body > *'); + this.onMarkdownScroll(totalLines.length); + }); + + // Handle image paste + cm.on('paste', (cm, event) => { + if (!event.clipboardData || !event.clipboardData.items) return; + for (let i = 0; i < event.clipboardData.items.length; i++) { + uploadImage(event.clipboardData.items[i].getAsFile()); + } + }); + + // Handle images on drag-drop + cm.on('drop', (cm, event) => { + event.stopPropagation(); + event.preventDefault(); + let cursorPos = cm.coordsChar({left: event.pageX, top: event.pageY}); + cm.setCursor(cursorPos); + if (!event.dataTransfer || !event.dataTransfer.files) return; + for (let i = 0; i < event.dataTransfer.files.length; i++) { + uploadImage(event.dataTransfer.files[i]); + } + }); + + // Helper to replace editor content + function replaceContent(search, replace) { + let text = cm.getValue(); + let cursor = cm.listSelections(); + cm.setValue(text.replace(search, replace)); + cm.setSelections(cursor); + } + + // Helper to replace the start of the line + function replaceLineStart(newStart) { + let cursor = cm.getCursor(); + let lineContent = cm.getLine(cursor.line); + let lineLen = lineContent.length; + let lineStart = lineContent.split(' ')[0]; + + // Remove symbol if already set + if (lineStart === newStart) { + lineContent = lineContent.replace(`${newStart} `, ''); + cm.replaceRange(lineContent, {line: cursor.line, ch: 0}, {line: cursor.line, ch: lineLen}); + cm.setCursor({line: cursor.line, ch: cursor.ch - (newStart.length + 1)}); + return; + } + + let alreadySymbol = /^[#>`]/.test(lineStart); + let posDif = 0; + if (alreadySymbol) { + posDif = newStart.length - lineStart.length; + lineContent = lineContent.replace(lineStart, newStart).trim(); + } else if (newStart !== '') { + posDif = newStart.length + 1; + lineContent = newStart + ' ' + lineContent; + } + cm.replaceRange(lineContent, {line: cursor.line, ch: 0}, {line: cursor.line, ch: lineLen}); + cm.setCursor({line: cursor.line, ch: cursor.ch + posDif}); + } + + function wrapLine(start, end) { + let cursor = cm.getCursor(); + let lineContent = cm.getLine(cursor.line); + let lineLen = lineContent.length; + let newLineContent = lineContent; + + if (lineContent.indexOf(start) === 0 && lineContent.slice(-end.length) === end) { + newLineContent = lineContent.slice(start.length, lineContent.length - end.length); + } else { + newLineContent = `${start}${lineContent}${end}`; + } + + cm.replaceRange(newLineContent, {line: cursor.line, ch: 0}, {line: cursor.line, ch: lineLen}); + cm.setCursor({line: cursor.line, ch: cursor.ch + start.length}); + } + + function wrapSelection(start, end) { + let selection = cm.getSelection(); + if (selection === '') return wrapLine(start, end); + + let newSelection = selection; + let frontDiff = 0; + let endDiff = 0; + + if (selection.indexOf(start) === 0 && selection.slice(-end.length) === end) { + newSelection = selection.slice(start.length, selection.length - end.length); + endDiff = -(end.length + start.length); + } else { + newSelection = `${start}${selection}${end}`; + endDiff = start.length + end.length; + } + + let selections = cm.listSelections()[0]; + cm.replaceSelection(newSelection); + let headFirst = selections.head.ch <= selections.anchor.ch; + selections.head.ch += headFirst ? frontDiff : endDiff; + selections.anchor.ch += headFirst ? endDiff : frontDiff; + cm.setSelections([selections]); + } + + // Handle image upload and add image into markdown content + function uploadImage(file) { + if (file === null || file.type.indexOf('image') !== 0) return; + let ext = 'png'; + + if (file.name) { + let fileNameMatches = file.name.match(/\.(.+)$/); + if (fileNameMatches.length > 1) ext = fileNameMatches[1]; + } + + // Insert image into markdown + let id = "image-" + Math.random().toString(16).slice(2); + let placeholderImage = window.baseUrl(`/loading.gif#upload${id}`); + let selectedText = cm.getSelection(); + let placeHolderText = ``; + cm.replaceSelection(placeHolderText); + + let remoteFilename = "image-" + Date.now() + "." + ext; + let formData = new FormData(); + formData.append('file', file, remoteFilename); + + window.$http.post('/images/gallery/upload', formData).then(resp => { + replaceContent(placeholderImage, resp.data.thumbs.display); + }).catch(err => { + events.emit('error', trans('errors.image_upload_error')); + replaceContent(placeHolderText, selectedText); + console.log(err); + }); + } + + function insertLink() { + let cursorPos = cm.getCursor('from'); + let selectedText = cm.getSelection() || ''; + let newText = `[${selectedText}]()`; + cm.focus(); + cm.replaceSelection(newText); + let cursorPosDiff = (selectedText === '') ? -3 : -1; + cm.setCursor(cursorPos.line, cursorPos.ch + newText.length+cursorPosDiff); + } + + this.updateAndRender(); + } + + actionInsertImage() { + let cursorPos = this.cm.getCursor('from'); + window.ImageManager.show(image => { + let selectedText = this.cm.getSelection(); + let newText = "![" + (selectedText || image.name) + "](" + image.thumbs.display + ")"; + this.cm.focus(); + this.cm.replaceSelection(newText); + this.cm.setCursor(cursorPos.line, cursorPos.ch + newText.length); + }); + } + + // Show the popup link selector and insert a link when finished + actionShowLinkSelector() { + let cursorPos = this.cm.getCursor('from'); + window.EntitySelectorPopup.show(entity => { + let selectedText = this.cm.getSelection() || entity.name; + let newText = `[${selectedText}](${entity.link})`; + this.cm.focus(); + this.cm.replaceSelection(newText); + this.cm.setCursor(cursorPos.line, cursorPos.ch + newText.length); + }); + } + +} + +module.exports = MarkdownEditor ; \ No newline at end of file diff --git a/resources/assets/js/components/wysiwyg-editor.js b/resources/assets/js/components/wysiwyg-editor.js new file mode 100644 index 000000000..ae369ff42 --- /dev/null +++ b/resources/assets/js/components/wysiwyg-editor.js @@ -0,0 +1,11 @@ +class WysiwygEditor { + + constructor(elem) { + this.elem = elem; + this.options = require("../pages/page-form"); + tinymce.init(this.options); + } + +} + +module.exports = WysiwygEditor; \ No newline at end of file diff --git a/resources/assets/js/controllers.js b/resources/assets/js/controllers.js deleted file mode 100644 index 32ff76fa1..000000000 --- a/resources/assets/js/controllers.js +++ /dev/null @@ -1,147 +0,0 @@ -"use strict"; - -const moment = require('moment'); -require('moment/locale/en-gb'); -const editorOptions = require("./pages/page-form"); - -moment.locale('en-gb'); - -module.exports = function (ngApp, events) { - - - ngApp.controller('PageEditController', ['$scope', '$http', '$attrs', '$interval', '$timeout', '$sce', - function ($scope, $http, $attrs, $interval, $timeout, $sce) { - - $scope.editorOptions = editorOptions(); - $scope.editContent = ''; - $scope.draftText = ''; - let pageId = Number($attrs.pageId); - let isEdit = pageId !== 0; - let autosaveFrequency = 30; // AutoSave interval in seconds. - let isMarkdown = $attrs.editorType === 'markdown'; - $scope.draftsEnabled = $attrs.draftsEnabled === 'true'; - $scope.isUpdateDraft = Number($attrs.pageUpdateDraft) === 1; - $scope.isNewPageDraft = Number($attrs.pageNewDraft) === 1; - - // Set initial header draft text - if ($scope.isUpdateDraft || $scope.isNewPageDraft) { - $scope.draftText = trans('entities.pages_editing_draft'); - } else { - $scope.draftText = trans('entities.pages_editing_page'); - } - - let autoSave = false; - - let currentContent = { - title: false, - html: false - }; - - if (isEdit && $scope.draftsEnabled) { - setTimeout(() => { - startAutoSave(); - }, 1000); - } - - // Actions specifically for the markdown editor - if (isMarkdown) { - $scope.displayContent = ''; - // Editor change event - $scope.editorChange = function (content) { - $scope.displayContent = $sce.trustAsHtml(content); - } - } - - if (!isMarkdown) { - $scope.editorChange = function() {}; - } - - let lastSave = 0; - - /** - * Start the AutoSave loop, Checks for content change - * before performing the costly AJAX request. - */ - function startAutoSave() { - currentContent.title = $('#name').val(); - currentContent.html = $scope.editContent; - - autoSave = $interval(() => { - // Return if manually saved recently to prevent bombarding the server - if (Date.now() - lastSave < (1000*autosaveFrequency)/2) return; - let newTitle = $('#name').val(); - let newHtml = $scope.editContent; - - if (newTitle !== currentContent.title || newHtml !== currentContent.html) { - currentContent.html = newHtml; - currentContent.title = newTitle; - saveDraft(); - } - - }, 1000 * autosaveFrequency); - } - - let draftErroring = false; - /** - * Save a draft update into the system via an AJAX request. - */ - function saveDraft() { - if (!$scope.draftsEnabled) return; - let data = { - name: $('#name').val(), - html: isMarkdown ? $sce.getTrustedHtml($scope.displayContent) : $scope.editContent - }; - - if (isMarkdown) data.markdown = $scope.editContent; - - let url = window.baseUrl('/ajax/page/' + pageId + '/save-draft'); - $http.put(url, data).then(responseData => { - draftErroring = false; - let updateTime = moment.utc(moment.unix(responseData.data.timestamp)).toDate(); - $scope.draftText = responseData.data.message + moment(updateTime).format('HH:mm'); - if (!$scope.isNewPageDraft) $scope.isUpdateDraft = true; - showDraftSaveNotification(); - lastSave = Date.now(); - }, errorRes => { - if (draftErroring) return; - events.emit('error', trans('errors.page_draft_autosave_fail')); - draftErroring = true; - }); - } - - function showDraftSaveNotification() { - $scope.draftUpdated = true; - $timeout(() => { - $scope.draftUpdated = false; - }, 2000) - } - - $scope.forceDraftSave = function() { - saveDraft(); - }; - - // Listen to save draft events from editor - $scope.$on('save-draft', saveDraft); - - /** - * Discard the current draft and grab the current page - * content from the system via an AJAX request. - */ - $scope.discardDraft = function () { - let url = window.baseUrl('/ajax/page/' + pageId); - $http.get(url).then(responseData => { - if (autoSave) $interval.cancel(autoSave); - $scope.draftText = trans('entities.pages_editing_page'); - $scope.isUpdateDraft = false; - $scope.$broadcast('html-update', responseData.data.html); - $scope.$broadcast('markdown-update', responseData.data.markdown || responseData.data.html); - $('#name').val(responseData.data.name); - $timeout(() => { - startAutoSave(); - }, 1000); - events.emit('success', trans('entities.pages_draft_discarded')); - }); - }; - - }]); -}; diff --git a/resources/assets/js/directives.js b/resources/assets/js/directives.js deleted file mode 100644 index 08b82357f..000000000 --- a/resources/assets/js/directives.js +++ /dev/null @@ -1,393 +0,0 @@ -"use strict"; -const MarkdownIt = require("markdown-it"); -const mdTasksLists = require('markdown-it-task-lists'); -const code = require('./code'); - -module.exports = function (ngApp, events) { - - /** - * TinyMCE - * An angular wrapper around the tinyMCE editor. - */ - ngApp.directive('tinymce', ['$timeout', function ($timeout) { - return { - restrict: 'A', - scope: { - tinymce: '=', - mceModel: '=', - mceChange: '=' - }, - link: function (scope, element, attrs) { - - function tinyMceSetup(editor) { - editor.on('ExecCommand change input NodeChange ObjectResized', (e) => { - let content = editor.getContent(); - $timeout(() => { - scope.mceModel = content; - }); - scope.mceChange(content); - }); - - editor.on('keydown', (event) => { - if (event.keyCode === 83 && (navigator.platform.match("Mac") ? event.metaKey : event.ctrlKey)) { - event.preventDefault(); - scope.$emit('save-draft', event); - } - }); - - editor.on('init', (e) => { - scope.mceModel = editor.getContent(); - }); - - scope.$on('html-update', (event, value) => { - editor.setContent(value); - editor.selection.select(editor.getBody(), true); - editor.selection.collapse(false); - scope.mceModel = editor.getContent(); - }); - } - - scope.tinymce.extraSetups.push(tinyMceSetup); - tinymce.init(scope.tinymce); - } - } - }]); - - const md = new MarkdownIt({html: true}); - md.use(mdTasksLists, {label: true}); - - /** - * Markdown input - * Handles the logic for just the editor input field. - */ - ngApp.directive('markdownInput', ['$timeout', function ($timeout) { - return { - restrict: 'A', - scope: { - mdModel: '=', - mdChange: '=' - }, - link: function (scope, element, attrs) { - - // Codemirror Setup - element = element.find('textarea').first(); - let cm = code.markdownEditor(element[0]); - - // Custom key commands - let metaKey = code.getMetaKey(); - const extraKeys = {}; - // Insert Image shortcut - extraKeys[`${metaKey}-Alt-I`] = function(cm) { - let selectedText = cm.getSelection(); - let newText = ``; - let cursorPos = cm.getCursor('from'); - cm.replaceSelection(newText); - cm.setCursor(cursorPos.line, cursorPos.ch + newText.length -1); - }; - // Save draft - extraKeys[`${metaKey}-S`] = function(cm) {scope.$emit('save-draft');}; - // Show link selector - extraKeys[`Shift-${metaKey}-K`] = function(cm) {showLinkSelector()}; - // Insert Link - extraKeys[`${metaKey}-K`] = function(cm) {insertLink()}; - // FormatShortcuts - extraKeys[`${metaKey}-1`] = function(cm) {replaceLineStart('##');}; - extraKeys[`${metaKey}-2`] = function(cm) {replaceLineStart('###');}; - extraKeys[`${metaKey}-3`] = function(cm) {replaceLineStart('####');}; - extraKeys[`${metaKey}-4`] = function(cm) {replaceLineStart('#####');}; - extraKeys[`${metaKey}-5`] = function(cm) {replaceLineStart('');}; - extraKeys[`${metaKey}-d`] = function(cm) {replaceLineStart('');}; - extraKeys[`${metaKey}-6`] = function(cm) {replaceLineStart('>');}; - extraKeys[`${metaKey}-q`] = function(cm) {replaceLineStart('>');}; - extraKeys[`${metaKey}-7`] = function(cm) {wrapSelection('\n```\n', '\n```');}; - extraKeys[`${metaKey}-8`] = function(cm) {wrapSelection('`', '`');}; - extraKeys[`Shift-${metaKey}-E`] = function(cm) {wrapSelection('`', '`');}; - extraKeys[`${metaKey}-9`] = function(cm) {wrapSelection('', '
');}; - cm.setOption('extraKeys', extraKeys); - - // Update data on content change - cm.on('change', (instance, changeObj) => { - update(instance); - }); - - // Handle scroll to sync display view - cm.on('scroll', instance => { - // Thanks to http://liuhao.im/english/2015/11/10/the-sync-scroll-of-markdown-editor-in-javascript.html - let scroll = instance.getScrollInfo(); - let atEnd = scroll.top + scroll.clientHeight === scroll.height; - if (atEnd) { - scope.$emit('markdown-scroll', -1); - return; - } - let lineNum = instance.lineAtHeight(scroll.top, 'local'); - let range = instance.getRange({line: 0, ch: null}, {line: lineNum, ch: null}); - let parser = new DOMParser(); - let doc = parser.parseFromString(md.render(range), 'text/html'); - let totalLines = doc.documentElement.querySelectorAll('body > *'); - scope.$emit('markdown-scroll', totalLines.length); - }); - - // Handle image paste - cm.on('paste', (cm, event) => { - if (!event.clipboardData || !event.clipboardData.items) return; - for (let i = 0; i < event.clipboardData.items.length; i++) { - uploadImage(event.clipboardData.items[i].getAsFile()); - } - }); - - // Handle images on drag-drop - cm.on('drop', (cm, event) => { - event.stopPropagation(); - event.preventDefault(); - let cursorPos = cm.coordsChar({left: event.pageX, top: event.pageY}); - cm.setCursor(cursorPos); - if (!event.dataTransfer || !event.dataTransfer.files) return; - for (let i = 0; i < event.dataTransfer.files.length; i++) { - uploadImage(event.dataTransfer.files[i]); - } - }); - - // Helper to replace editor content - function replaceContent(search, replace) { - let text = cm.getValue(); - let cursor = cm.listSelections(); - cm.setValue(text.replace(search, replace)); - cm.setSelections(cursor); - } - - // Helper to replace the start of the line - function replaceLineStart(newStart) { - let cursor = cm.getCursor(); - let lineContent = cm.getLine(cursor.line); - let lineLen = lineContent.length; - let lineStart = lineContent.split(' ')[0]; - - // Remove symbol if already set - if (lineStart === newStart) { - lineContent = lineContent.replace(`${newStart} `, ''); - cm.replaceRange(lineContent, {line: cursor.line, ch: 0}, {line: cursor.line, ch: lineLen}); - cm.setCursor({line: cursor.line, ch: cursor.ch - (newStart.length + 1)}); - return; - } - - let alreadySymbol = /^[#>`]/.test(lineStart); - let posDif = 0; - if (alreadySymbol) { - posDif = newStart.length - lineStart.length; - lineContent = lineContent.replace(lineStart, newStart).trim(); - } else if (newStart !== '') { - posDif = newStart.length + 1; - lineContent = newStart + ' ' + lineContent; - } - cm.replaceRange(lineContent, {line: cursor.line, ch: 0}, {line: cursor.line, ch: lineLen}); - cm.setCursor({line: cursor.line, ch: cursor.ch + posDif}); - } - - function wrapLine(start, end) { - let cursor = cm.getCursor(); - let lineContent = cm.getLine(cursor.line); - let lineLen = lineContent.length; - let newLineContent = lineContent; - - if (lineContent.indexOf(start) === 0 && lineContent.slice(-end.length) === end) { - newLineContent = lineContent.slice(start.length, lineContent.length - end.length); - } else { - newLineContent = `${start}${lineContent}${end}`; - } - - cm.replaceRange(newLineContent, {line: cursor.line, ch: 0}, {line: cursor.line, ch: lineLen}); - cm.setCursor({line: cursor.line, ch: cursor.ch + start.length}); - } - - function wrapSelection(start, end) { - let selection = cm.getSelection(); - if (selection === '') return wrapLine(start, end); - - let newSelection = selection; - let frontDiff = 0; - let endDiff = 0; - - if (selection.indexOf(start) === 0 && selection.slice(-end.length) === end) { - newSelection = selection.slice(start.length, selection.length - end.length); - endDiff = -(end.length + start.length); - } else { - newSelection = `${start}${selection}${end}`; - endDiff = start.length + end.length; - } - - let selections = cm.listSelections()[0]; - cm.replaceSelection(newSelection); - let headFirst = selections.head.ch <= selections.anchor.ch; - selections.head.ch += headFirst ? frontDiff : endDiff; - selections.anchor.ch += headFirst ? endDiff : frontDiff; - cm.setSelections([selections]); - } - - // Handle image upload and add image into markdown content - function uploadImage(file) { - if (file === null || file.type.indexOf('image') !== 0) return; - let ext = 'png'; - - if (file.name) { - let fileNameMatches = file.name.match(/\.(.+)$/); - if (fileNameMatches.length > 1) ext = fileNameMatches[1]; - } - - // Insert image into markdown - let id = "image-" + Math.random().toString(16).slice(2); - let placeholderImage = window.baseUrl(`/loading.gif#upload${id}`); - let selectedText = cm.getSelection(); - let placeHolderText = ``; - cm.replaceSelection(placeHolderText); - - let remoteFilename = "image-" + Date.now() + "." + ext; - let formData = new FormData(); - formData.append('file', file, remoteFilename); - - window.$http.post('/images/gallery/upload', formData).then(resp => { - replaceContent(placeholderImage, resp.data.thumbs.display); - }).catch(err => { - events.emit('error', trans('errors.image_upload_error')); - replaceContent(placeHolderText, selectedText); - console.log(err); - }); - } - - // Show the popup link selector and insert a link when finished - function showLinkSelector() { - let cursorPos = cm.getCursor('from'); - window.EntitySelectorPopup.show(entity => { - let selectedText = cm.getSelection() || entity.name; - let newText = `[${selectedText}](${entity.link})`; - cm.focus(); - cm.replaceSelection(newText); - cm.setCursor(cursorPos.line, cursorPos.ch + newText.length); - }); - } - - function insertLink() { - let cursorPos = cm.getCursor('from'); - let selectedText = cm.getSelection() || ''; - let newText = `[${selectedText}]()`; - cm.focus(); - cm.replaceSelection(newText); - let cursorPosDiff = (selectedText === '') ? -3 : -1; - cm.setCursor(cursorPos.line, cursorPos.ch + newText.length+cursorPosDiff); - } - - // Show the image manager and handle image insertion - function showImageManager() { - let cursorPos = cm.getCursor('from'); - window.ImageManager.show(image => { - let selectedText = cm.getSelection(); - let newText = "![" + (selectedText || image.name) + "](" + image.thumbs.display + ")"; - cm.focus(); - cm.replaceSelection(newText); - cm.setCursor(cursorPos.line, cursorPos.ch + newText.length); - }); - } - - // Update the data models and rendered output - function update(instance) { - let content = instance.getValue(); - element.val(content); - $timeout(() => { - scope.mdModel = content; - scope.mdChange(md.render(content)); - }); - } - update(cm); - - // Listen to commands from parent scope - scope.$on('md-insert-link', showLinkSelector); - scope.$on('md-insert-image', showImageManager); - scope.$on('markdown-update', (event, value) => { - cm.setValue(value); - element.val(value); - scope.mdModel = value; - scope.mdChange(md.render(value)); - }); - - } - } - }]); - - /** - * Markdown Editor - * Handles all functionality of the markdown editor. - */ - ngApp.directive('markdownEditor', ['$timeout', '$rootScope', function ($timeout, $rootScope) { - return { - restrict: 'A', - link: function (scope, element, attrs) { - - // Editor Elements - const $display = element.find('.markdown-display').first(); - const $insertImage = element.find('button[data-action="insertImage"]'); - const $insertEntityLink = element.find('button[data-action="insertEntityLink"]'); - - // Prevent markdown display link click redirect - $display.on('click', 'a', function(event) { - event.preventDefault(); - window.open(this.getAttribute('href')); - }); - - // Editor UI Actions - $insertEntityLink.click(e => {scope.$broadcast('md-insert-link');}); - $insertImage.click(e => {scope.$broadcast('md-insert-image');}); - - // Handle scroll sync event from editor scroll - $rootScope.$on('markdown-scroll', (event, lineCount) => { - let elems = $display[0].children[0].children; - if (elems.length > lineCount) { - let topElem = (lineCount === -1) ? elems[elems.length-1] : elems[lineCount]; - $display.animate({ - scrollTop: topElem.offsetTop - }, {queue: false, duration: 200, easing: 'linear'}); - } - }); - } - } - }]); - - /** - * Page Editor Toolbox - * Controls all functionality for the sliding toolbox - * on the page edit view. - */ - ngApp.directive('toolbox', [function () { - return { - restrict: 'A', - link: function (scope, elem, attrs) { - - // Get common elements - const $buttons = elem.find('[toolbox-tab-button]'); - const $content = elem.find('[toolbox-tab-content]'); - const $toggle = elem.find('[toolbox-toggle]'); - - // Handle toolbox toggle click - $toggle.click((e) => { - elem.toggleClass('open'); - }); - - // Set an active tab/content by name - function setActive(tabName, openToolbox) { - $buttons.removeClass('active'); - $content.hide(); - $buttons.filter(`[toolbox-tab-button="${tabName}"]`).addClass('active'); - $content.filter(`[toolbox-tab-content="${tabName}"]`).show(); - if (openToolbox) elem.addClass('open'); - } - - // Set the first tab content active on load - setActive($content.first().attr('toolbox-tab-content'), false); - - // Handle tab button click - $buttons.click(function (e) { - let name = $(this).attr('toolbox-tab-button'); - setActive(name, true); - }); - } - } - }]); -}; diff --git a/resources/assets/js/global.js b/resources/assets/js/global.js index 7126479c1..352616c5a 100644 --- a/resources/assets/js/global.js +++ b/resources/assets/js/global.js @@ -58,16 +58,6 @@ window.$http = axiosInstance; Vue.prototype.$http = axiosInstance; Vue.prototype.$events = window.$events; - -// AngularJS - Create application and load components -const angular = require("angular"); -require("angular-resource"); -require("angular-animate"); -require("angular-sanitize"); -require("angular-ui-sortable"); - -let ngApp = angular.module('bookStack', ['ngResource', 'ngAnimate', 'ngSanitize', 'ui.sortable']); - // Translation setup // Creates a global function with name 'trans' to be used in the same way as Laravel's translation system const Translations = require("./translations"); @@ -79,11 +69,6 @@ window.trans_choice = translator.getPlural.bind(translator); require("./vues/vues"); require("./components"); -// Load in angular specific items -const Directives = require('./directives'); -const Controllers = require('./controllers'); -Directives(ngApp, window.$events); -Controllers(ngApp, window.$events); //Global jQuery Config & Extensions diff --git a/resources/assets/js/pages/page-form.js b/resources/assets/js/pages/page-form.js index 96cefd910..ec433b316 100644 --- a/resources/assets/js/pages/page-form.js +++ b/resources/assets/js/pages/page-form.js @@ -1,5 +1,4 @@ "use strict"; - const Code = require('../code'); /** @@ -66,6 +65,12 @@ function registerEditorShortcuts(editor) { editor.shortcuts.add('meta+e', '', ['codeeditor', false, 'pre']); editor.shortcuts.add('meta+8', '', ['FormatBlock', false, 'code']); editor.shortcuts.add('meta+shift+E', '', ['FormatBlock', false, 'code']); + + // Save draft shortcut + editor.shortcuts.add('meta+S', '', () => { + window.$events.emit('editor-save-draft'); + }); + // Loop through callout styles editor.shortcuts.add('meta+9', '', function() { let selectedNode = editor.selection.getNode(); @@ -84,6 +89,7 @@ function registerEditorShortcuts(editor) { } editor.formatter.apply('p'); }); + } @@ -196,189 +202,192 @@ function codePlugin() { }); } +codePlugin(); -function hrPlugin() { - window.tinymce.PluginManager.add('customhr', function (editor) { - editor.addCommand('InsertHorizontalRule', function () { - let hrElem = document.createElement('hr'); - let cNode = editor.selection.getNode(); - let parentNode = cNode.parentNode; - parentNode.insertBefore(hrElem, cNode); - }); - - editor.addButton('hr', { - icon: 'hr', - tooltip: 'Horizontal line', - cmd: 'InsertHorizontalRule' - }); - - editor.addMenuItem('hr', { - icon: 'hr', - text: 'Horizontal line', - cmd: 'InsertHorizontalRule', - context: 'insert' - }); +window.tinymce.PluginManager.add('customhr', function (editor) { + editor.addCommand('InsertHorizontalRule', function () { + let hrElem = document.createElement('hr'); + let cNode = editor.selection.getNode(); + let parentNode = cNode.parentNode; + parentNode.insertBefore(hrElem, cNode); }); -} -module.exports = function() { - hrPlugin(); - codePlugin(); - let settings = { - selector: '#html-editor', - content_css: [ - window.baseUrl('/css/styles.css'), - window.baseUrl('/libs/material-design-iconic-font/css/material-design-iconic-font.min.css') - ], - branding: false, - body_class: 'page-content', - browser_spellcheck: true, - relative_urls: false, - remove_script_host: false, - document_base_url: window.baseUrl('/'), - statusbar: false, - menubar: false, - paste_data_images: false, - extended_valid_elements: 'pre[*]', - automatic_uploads: false, - valid_children: "-div[p|h1|h2|h3|h4|h5|h6|blockquote],+div[pre]", - plugins: "image table textcolor paste link autolink fullscreen imagetools code customhr autosave lists codeeditor", - imagetools_toolbar: 'imageoptions', - toolbar: "undo redo | styleselect | bold italic underline strikethrough superscript subscript | forecolor backcolor | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | table image-insert link hr | removeformat code fullscreen", - content_style: "body {padding-left: 15px !important; padding-right: 15px !important; margin:0!important; margin-left:auto!important;margin-right:auto!important;}", - style_formats: [ - {title: "Header Large", format: "h2"}, - {title: "Header Medium", format: "h3"}, - {title: "Header Small", format: "h4"}, - {title: "Header Tiny", format: "h5"}, - {title: "Paragraph", format: "p", exact: true, classes: ''}, - {title: "Blockquote", format: "blockquote"}, - {title: "Code Block", icon: "code", cmd: 'codeeditor', format: 'codeeditor'}, - {title: "Inline Code", icon: "code", inline: "code"}, - {title: "Callouts", items: [ - {title: "Info", format: 'calloutinfo'}, - {title: "Success", format: 'calloutsuccess'}, - {title: "Warning", format: 'calloutwarning'}, - {title: "Danger", format: 'calloutdanger'} - ]}, - ], - style_formats_merge: false, - formats: { - codeeditor: {selector: 'p,h1,h2,h3,h4,h5,h6,td,th,div'}, - alignleft: {selector: 'p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li,table,img', classes: 'align-left'}, - aligncenter: {selector: 'p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li,table,img', classes: 'align-center'}, - alignright: {selector: 'p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li,table,img', classes: 'align-right'}, - calloutsuccess: {block: 'p', exact: true, attributes: {class: 'callout success'}}, - calloutinfo: {block: 'p', exact: true, attributes: {class: 'callout info'}}, - calloutwarning: {block: 'p', exact: true, attributes: {class: 'callout warning'}}, - calloutdanger: {block: 'p', exact: true, attributes: {class: 'callout danger'}} - }, - file_browser_callback: function (field_name, url, type, win) { + editor.addButton('hr', { + icon: 'hr', + tooltip: 'Horizontal line', + cmd: 'InsertHorizontalRule' + }); - if (type === 'file') { - window.EntitySelectorPopup.show(function(entity) { - let originalField = win.document.getElementById(field_name); - originalField.value = entity.link; - $(originalField).closest('.mce-form').find('input').eq(2).val(entity.name); + editor.addMenuItem('hr', { + icon: 'hr', + text: 'Horizontal line', + cmd: 'InsertHorizontalRule', + context: 'insert' + }); +}); + + + +module.exports = { + selector: '#html-editor', + content_css: [ + window.baseUrl('/css/styles.css'), + window.baseUrl('/libs/material-design-iconic-font/css/material-design-iconic-font.min.css') + ], + branding: false, + body_class: 'page-content', + browser_spellcheck: true, + relative_urls: false, + remove_script_host: false, + document_base_url: window.baseUrl('/'), + statusbar: false, + menubar: false, + paste_data_images: false, + extended_valid_elements: 'pre[*]', + automatic_uploads: false, + valid_children: "-div[p|h1|h2|h3|h4|h5|h6|blockquote],+div[pre]", + plugins: "image table textcolor paste link autolink fullscreen imagetools code customhr autosave lists codeeditor", + imagetools_toolbar: 'imageoptions', + toolbar: "undo redo | styleselect | bold italic underline strikethrough superscript subscript | forecolor backcolor | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | table image-insert link hr | removeformat code fullscreen", + content_style: "body {padding-left: 15px !important; padding-right: 15px !important; margin:0!important; margin-left:auto!important;margin-right:auto!important;}", + style_formats: [ + {title: "Header Large", format: "h2"}, + {title: "Header Medium", format: "h3"}, + {title: "Header Small", format: "h4"}, + {title: "Header Tiny", format: "h5"}, + {title: "Paragraph", format: "p", exact: true, classes: ''}, + {title: "Blockquote", format: "blockquote"}, + {title: "Code Block", icon: "code", cmd: 'codeeditor', format: 'codeeditor'}, + {title: "Inline Code", icon: "code", inline: "code"}, + {title: "Callouts", items: [ + {title: "Info", format: 'calloutinfo'}, + {title: "Success", format: 'calloutsuccess'}, + {title: "Warning", format: 'calloutwarning'}, + {title: "Danger", format: 'calloutdanger'} + ]}, + ], + style_formats_merge: false, + formats: { + codeeditor: {selector: 'p,h1,h2,h3,h4,h5,h6,td,th,div'}, + alignleft: {selector: 'p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li,table,img', classes: 'align-left'}, + aligncenter: {selector: 'p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li,table,img', classes: 'align-center'}, + alignright: {selector: 'p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li,table,img', classes: 'align-right'}, + calloutsuccess: {block: 'p', exact: true, attributes: {class: 'callout success'}}, + calloutinfo: {block: 'p', exact: true, attributes: {class: 'callout info'}}, + calloutwarning: {block: 'p', exact: true, attributes: {class: 'callout warning'}}, + calloutdanger: {block: 'p', exact: true, attributes: {class: 'callout danger'}} + }, + file_browser_callback: function (field_name, url, type, win) { + + if (type === 'file') { + window.EntitySelectorPopup.show(function(entity) { + let originalField = win.document.getElementById(field_name); + originalField.value = entity.link; + $(originalField).closest('.mce-form').find('input').eq(2).val(entity.name); + }); + } + + if (type === 'image') { + // Show image manager + window.ImageManager.show(function (image) { + + // Set popover link input to image url then fire change event + // to ensure the new value sticks + win.document.getElementById(field_name).value = image.url; + if ("createEvent" in document) { + let evt = document.createEvent("HTMLEvents"); + evt.initEvent("change", false, true); + win.document.getElementById(field_name).dispatchEvent(evt); + } else { + win.document.getElementById(field_name).fireEvent("onchange"); + } + + // Replace the actively selected content with the linked image + let html = ``; + html += `