Removed error related to Vue app.

build/eventBus.js

@@ -0,0 +1,9 @@
+import {TinyEmitter} from 'tiny-emitter'
+
+const instance = new TinyEmitter()
+export default {
+ $on: (...args) => instance.on(...args),
+ $once: (...args) => instance.once(...args),
+ $off: (...args) => instance.off(...args),
+ $emit: (...args) => instance.emit(...args),
+}

index.js

@@ -1,5 +1,7 @@
+import { app } from './src/VueApp.js';
 const env = require('./config/prod.env');
 
+console.log(app)
 Object.keys(env).forEach((key) => {
  if (!process.env[key]) {
  process.env[key] = JSON.parse(env[key]);

package.json

@@ -59,7 +59,7 @@
  "mousetrap": "^1.6.5",
  "normalize-scss": "^7.0.1",
  "path-browserify": "^1.0.1",
- "prismjs": "^1.29.0",
+ "prismjs": "1.6.0",
  "request": "^2.88.2",
  "serve-static": "^1.15.0",
  "tmp": "^0.2.1",
@@ -68,6 +68,7 @@
  "vuex": "^4.1.0"
  },
  "devDependencies": {
+ "tiny-emitter": "^2.1.0",
  "@babel/core": "^7.19.6",
  "@babel/preset-env": "^7.19.4",
  "autoprefixer": "^10.4.13",

src/VueApp.js

@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './components/App.vue';
+
+export const app = createApp(App);

src/components/CodeEditor.vue

@@ -3,7 +3,7 @@
 </template>
 
 <script>
-import Prism from 'prismjs';
+import * as Prism from 'prismjs';
 import cledit from '../services/editor/cledit/index.js';
 
 export default {
@@ -19,7 +19,7 @@ export default {
  clEditor.on('contentChanged', value => this.$emit('changed', value));
  clEditor.init({
  content: this.value,
- sectionHighlighter: section => Prism.highlight(section.text, Prism.languages[this.lang]),
+ sectionHighlighter: section => Prism.highlight(section.text, Prism.languages[this.lang], Prism.languages[this.lang]),
  });
  clEditor.toggleEditable(!this.disabled);
  }

src/components/gutters/NewComment.vue

@@ -22,7 +22,7 @@
 
 <script>
 import { mapGetters, mapMutations, mapActions } from 'vuex';
-import Prism from 'prismjs';
+import * as Prism from 'prismjs';
 import UserImage from '../UserImage.vue';
 import cledit from '../../services/editor/cledit/index.js';
 import editorSvc from '../../services/editorSvc.js';
@@ -96,6 +96,7 @@ export default {
  sectionHighlighter: section => Prism.highlight(
  section.text,
  editorSvc.prismGrammars[section.data],
+ Prism.languages[this.lang]
  ),
  sectionParser: text => markdownConversionSvc
  .parseSections(editorSvc.converter, text).sections,

src/components/modals/FilePropertiesModal.vue

@@ -202,7 +202,7 @@ export default {
  setYamlProperties(value) {
  this.yamlProperties = value;
  try {
- this.properties = yaml.safeLoad(value);
+ this.properties = yaml.load(value);
  this.error = null;
  } catch (e) {
  this.error = e.message;

src/components/modals/SettingsModal.vue

@@ -72,7 +72,7 @@ export default {
  setCustomSettings(value) {
  this.customSettings = value;
  try {
- yaml.safeLoad(this.strippedCustomSettings);
+ yaml.load(this.strippedCustomSettings);
  this.error = null;
  } catch (e) {
  this.error = e.message;
@@ -82,7 +82,7 @@ export default {
  if (!this.error) {
  const settings = this.strippedCustomSettings;
  await store.dispatch('data/setSettings', settings);
- const customSettings = yaml.safeLoad(settings);
+ const customSettings = yaml.load(settings);
  if (customSettings.shortcuts) {
  badgeSvc.addBadge('changeShortcuts');
  }

src/extensions/index.js

@@ -1,3 +1,6 @@
+window.Prism = window.Prism || {};
+Prism.manual = true;
+
 import './emojiExtension.js';
 import './abcExtension.js';
 import './katexExtension.js';

src/extensions/markdownExtension.js

@@ -1,4 +1,4 @@
-import Prism from 'prismjs';
+import * as Prism from 'prismjs';
 import markdownitAbbr from 'markdown-it-abbr';
 import markdownitDeflist from 'markdown-it-deflist';
 import markdownitFootnote from 'markdown-it-footnote';

src/icons/index.js

@@ -53,62 +53,60 @@ import ContentCopy from './ContentCopy.vue';
 import Key from './Key.vue';
 import DotsHorizontal from './DotsHorizontal.vue';
 import Seal from './Seal.vue';
-import { app } from '../index.js';
+import { app } from '../VueApp.js';
 
-
-
-app.component('iconProvider', Provider)
-.component('iconFormatBold', FormatBold)
-.component('iconFormatItalic', FormatItalic)
-.component('iconFormatQuoteClose', FormatQuoteClose)
-.component('iconLinkVariant', LinkVariant)
-.component('iconFileImage', FileImage)
-.component('iconTable', Table)
-.component('iconFormatListNumbers', FormatListNumbers)
-.component('iconFormatListBulleted', FormatListBulleted)
-.component('iconFormatSize', FormatSize)
-.component('iconFormatStrikethrough', FormatStrikethrough)
-.component('iconStatusBar', StatusBar)
-.component('iconNavigationBar', NavigationBar)
-.component('iconSidePreview', SidePreview)
-.component('iconEye', Eye)
-.component('iconSettings', Settings)
-.component('iconFilePlus', FilePlus)
-.component('iconFileMultiple', FileMultiple)
-.component('iconFolderPlus', FolderPlus)
-.component('iconDelete', Delete)
-.component('iconClose', Close)
-.component('iconPen', Pen)
-.component('iconTarget', Target)
-.component('iconArrowLeft', ArrowLeft)
-.component('iconHelpCircle', HelpCircle)
-.component('iconToc', Toc)
-.component('iconLogin', Login)
-.component('iconLogout', Logout)
-.component('iconSync', Sync)
-.component('iconSyncOff', SyncOff)
-.component('iconUpload', Upload)
-.component('iconViewList', ViewList)
-.component('iconDownload', Download)
-.component('iconCodeTags', CodeTags)
-.component('iconCodeBraces', CodeBraces)
-.component('iconOpenInNew', OpenInNew)
-.component('iconInformation', Information)
-.component('iconAlert', Alert)
-.component('iconSignalOff', SignalOff)
-.component('iconFolder', Folder)
-.component('iconScrollSync', ScrollSync)
-.component('iconPrinter', Printer)
-.component('iconUndo', Undo)
-.component('iconRedo', Redo)
-.component('iconContentSave', ContentSave)
-.component('iconMessage', Message)
-.component('iconHistory', History)
-.component('iconDatabase', Database)
-.component('iconMagnify', Magnify)
-.component('iconFormatListChecks', FormatListChecks)
-.component('iconCheckCircle', CheckCircle)
-.component('iconContentCopy', ContentCopy)
-.component('iconKey', Key)
-.component('iconDotsHorizontal', DotsHorizontal)
-.component('iconSeal', Seal);
+ app.component('iconProvider', Provider)
+ .component('iconFormatBold', FormatBold)
+ .component('iconFormatItalic', FormatItalic)
+ .component('iconFormatQuoteClose', FormatQuoteClose)
+ .component('iconLinkVariant', LinkVariant)
+ .component('iconFileImage', FileImage)
+ .component('iconTable', Table)
+ .component('iconFormatListNumbers', FormatListNumbers)
+ .component('iconFormatListBulleted', FormatListBulleted)
+ .component('iconFormatSize', FormatSize)
+ .component('iconFormatStrikethrough', FormatStrikethrough)
+ .component('iconStatusBar', StatusBar)
+ .component('iconNavigationBar', NavigationBar)
+ .component('iconSidePreview', SidePreview)
+ .component('iconEye', Eye)
+ .component('iconSettings', Settings)
+ .component('iconFilePlus', FilePlus)
+ .component('iconFileMultiple', FileMultiple)
+ .component('iconFolderPlus', FolderPlus)
+ .component('iconDelete', Delete)
+ .component('iconClose', Close)
+ .component('iconPen', Pen)
+ .component('iconTarget', Target)
+ .component('iconArrowLeft', ArrowLeft)
+ .component('iconHelpCircle', HelpCircle)
+ .component('iconToc', Toc)
+ .component('iconLogin', Login)
+ .component('iconLogout', Logout)
+ .component('iconSync', Sync)
+ .component('iconSyncOff', SyncOff)
+ .component('iconUpload', Upload)
+ .component('iconViewList', ViewList)
+ .component('iconDownload', Download)
+ .component('iconCodeTags', CodeTags)
+ .component('iconCodeBraces', CodeBraces)
+ .component('iconOpenInNew', OpenInNew)
+ .component('iconInformation', Information)
+ .component('iconAlert', Alert)
+ .component('iconSignalOff', SignalOff)
+ .component('iconFolder', Folder)
+ .component('iconScrollSync', ScrollSync)
+ .component('iconPrinter', Printer)
+ .component('iconUndo', Undo)
+ .component('iconRedo', Redo)
+ .component('iconContentSave', ContentSave)
+ .component('iconMessage', Message)
+ .component('iconHistory', History)
+ .component('iconDatabase', Database)
+ .component('iconMagnify', Magnify)
+ .component('iconFormatListChecks', FormatListChecks)
+ .component('iconCheckCircle', CheckCircle)
+ .component('iconContentCopy', ContentCopy)
+ .component('iconKey', Key)
+ .component('iconDotsHorizontal', DotsHorizontal)
+ .component('iconSeal', Seal);

src/index.js

@@ -1,17 +1,18 @@
+import store from './store/index.js';
+import localDbSvc from './services/localDbSvc.js';
+import './icons/index.js';
 import 'indexeddbshim/dist/indexeddbshim.js';
 import * as OfflinePluginRuntime from 'offline-plugin/runtime.js';
 import './extensions/index.js';
 import './services/optional/index.js';
-import './icons/index.js';
-import App from './components/App.vue';
-import store from './store/index.js';
-import localDbSvc from './services/localDbSvc.js';
-import { createApp } from 'vue';
+import { app } from './VueApp.js';
+
+
+app.mount('#app')
 
 if (!indexedDB) {
  throw new Error('Your browser is not supported. Please upgrade to the latest version.');
 }
-
 OfflinePluginRuntime.install({
  onUpdateReady: () => {
  // Tells to new SW to take control immediately
@@ -48,7 +49,6 @@ if (!localStorage.installPrompted) {
  });
 }
 
-export const app = createApp(App);
-app.mount('#app')
+
 
 console.log("Started")

src/services/editorSvc.js

@@ -1,6 +1,5 @@
-import * as Vue from 'vue';
 import DiffMatchPatch from 'diff-match-patch';
-import Prism from 'prismjs';
+import * as Prism from 'prismjs';
 import markdownItPandocRenderer from 'markdown-it-pandoc-renderer';
 import cledit from './editor/cledit/index.js';
 import pagedown from '../libs/pagedown.js';
@@ -13,6 +12,7 @@ import editorSvcDiscussions from './editor/editorSvcDiscussions.js';
 import editorSvcUtils from './editor/editorSvcUtils.js';
 import utils from './utils.js';
 import store from '../store/index.js';
+import eventBus from '../../build/eventBus.js';
 
 const allowDebounce = (action, wait) => {
  let timeoutId;
@@ -40,8 +40,10 @@ class SectionDesc {
  }
 }
 
+
 // Use a vue instance as an event bus
-const editorSvc = Object.assign(new Vue(), editorSvcDiscussions, editorSvcUtils, {
+//https://docs.gitlab.com/ee/development/fe_guide/vue3_migration.html
+const editorSvc = Object.assign(eventBus, editorSvcDiscussions, editorSvcUtils, {
  // Elements
  editorElt: null,
  previewElt: null,

src/services/markdownConversionSvc.js

@@ -1,5 +1,5 @@
 import DiffMatchPatch from 'diff-match-patch';
-import Prism from 'prismjs';
+import * as Prism from 'prismjs';
 import MarkdownIt from 'markdown-it';
 import markdownGrammarSvc from './markdownGrammarSvc.js';
 import extensionSvc from './extensionSvc.js';
@@ -268,6 +268,6 @@ export default {
  highlight(markdown, converter = this.defaultConverter, grammars = this.defaultPrismGrammars) {
  const parsingCtx = this.parseSections(converter, markdown);
  return parsingCtx.sections
- .map(section => Prism.highlight(section.text, grammars[section.data])).join('');
+ .map(section => Prism.highlight(section.text, grammars[section.data], Prism.languages[this.lang])).join('');
  },
 };

src/services/optional/keystrokes.js

@@ -182,6 +182,7 @@ function tabKeyHandler(evt, state) {
  return true;
 }
 
+//TODO fix
 editorSvc.$on('inited', () => {
  editorSvc.clEditor.addKeystroke(new Keystroke(enterKeyHandler, 50));
  editorSvc.clEditor.addKeystroke(new Keystroke(tabKeyHandler, 50));

src/services/optional/scrollSync.js

@@ -172,6 +172,7 @@ store.watch(
  },
 );
 
+//TODO fix
 editorSvc.$on('previewCtxMeasured', (previewCtxMeasured) => {
  if (previewCtxMeasured) {
  ({ sectionDescList } = previewCtxMeasured);

src/services/utils.js

@@ -195,7 +195,7 @@ export default {
  computeProperties(yamlProperties) {
  let properties = {};
  try {
- properties = yaml.safeLoad(yamlProperties) || {};
+ properties = yaml.load(yamlProperties) || {};
  } catch (e) {
  // Ignore
  }

src/store/data.js

@@ -149,8 +149,8 @@ export default {
  workspaces: getter('workspaces'), // Not to be used, prefer workspace/workspacesById
  settings: getter('settings'),
  computedSettings: (state, { settings }) => {
- const customSettings = yaml.safeLoad(settings);
- const parsedSettings = yaml.safeLoad(defaultSettings);
+ const customSettings = yaml.load(settings,{});
+ const parsedSettings = yaml.load(defaultSettings,{});
  const override = (obj, opt) => {
  const objType = Object.prototype.toString.call(obj);
  const optType = Object.prototype.toString.call(opt);

src/store/index.js

@@ -20,7 +20,7 @@ import locationTemplate from './locationTemplate.js';
 import emptyPublishLocation from '../data/empties/emptyPublishLocation.js';
 import emptySyncLocation from '../data/empties/emptySyncLocation.js';
 import constants from '../data/constants.js';
-import { app } from '../index.js';
+import { app } from '../VueApp.js';
 
 
 const debug = NODE_ENV !== 'production';
@@ -184,4 +184,6 @@ setInterval(() => {
 }, 30 * 1000);
 
 export default store;
+
 app.use(store)
+