Merge pull request #271 from quietdreamr/remarkable-config

feat: Add possibility to add custom Remarkable configuration

component/src/deepChat.ts

@@ -21,6 +21,7 @@ import {ErrorMessages, OnError} from './types/error';
 import {RequestBodyLimits} from './types/chatLimits';
 import {Property} from './utils/decorators/property';
 import {FireEvents} from './utils/events/fireEvents';
+import type { RemarkableOptions } from 'remarkable';
 import {ValidateInput} from './types/validateInput';
 import {WebModel} from './types/webModel/webModel';
 import {DropupStyles} from './types/dropupStyles';
@@ -50,6 +51,9 @@ export class DeepChat extends InternalHTML {
   @Property('object')
   webModel?: WebModel;
 
+  @Property('object')
+  remarkableConfig?: RemarkableOptions;
+
   @Property('object')
   requestBodyLimits?: RequestBodyLimits;
 

component/src/services/utils/setFileTypes.ts

@@ -141,7 +141,7 @@ export class SetFileTypes {
   public static set(deepChat: DeepChat, serviceIO: ServiceIO, existingFileTypes?: ServiceFileTypes) {
     SetFileTypes.populateDefaultFileIO(existingFileTypes?.audio, '.4a,.mp3,.webm,.mp4,.mpga,.wav,.mpeg,.m4a');
     SetFileTypes.populateDefaultFileIO(existingFileTypes?.images, '.png,.jpg');
-    const remarkable = RemarkableConfig.createNew();
+    const remarkable = RemarkableConfig.createNew(deepChat.remarkableConfig);
     SetFileTypes.processImagesConfig(serviceIO, remarkable, deepChat.images, existingFileTypes?.images);
     SetFileTypes.processCamera(serviceIO, remarkable, deepChat.camera, deepChat.images);
     SetFileTypes.processGifConfig(serviceIO, remarkable, deepChat.gifs, existingFileTypes?.gifs);

component/src/views/chat/messages/messages.ts

@@ -61,7 +61,7 @@ export class Messages extends MessagesBase {
     this._displayServiceErrorMessages = deepChat.errorMessages?.displayServiceErrorMessages;
     deepChat.getMessages = () => JSON.parse(JSON.stringify(this.messageToElements.map(([msg]) => msg)));
     deepChat.clearMessages = this.clearMessages.bind(this, serviceIO);
-    deepChat.refreshMessages = this.refreshTextMessages.bind(this);
+    deepChat.refreshMessages = this.refreshTextMessages.bind(this, deepChat.remarkableConfig);
     deepChat.scrollToBottom = ElementUtils.scrollToBottom.bind(this, this.elementRef);
     deepChat.addMessage = (message: ResponseI, isUpdate?: boolean) => {
       this.addAnyMessage({...message, sendUpdate: !!isUpdate}, !isUpdate);

component/src/views/chat/messages/messagesBase.ts

@@ -7,6 +7,7 @@ import {LoadingStyle} from '../../../utils/loading/loadingStyle';
 import {RemarkableConfig} from './remarkable/remarkableConfig';
 import {MessageStyleUtils} from './utils/messageStyleUtils';
 import {FireEvents} from '../../../utils/events/fireEvents';
+import {Remarkable, RemarkableOptions} from 'remarkable';
 import {LoadingHistory} from './history/loadingHistory';
 import {HTMLClassUtilities} from '../../../types/html';
 import {IntroPanel} from '../introPanel/introPanel';
@@ -17,7 +18,6 @@ import {Avatars} from '../../../types/avatars';
 import {DeepChat} from '../../../deepChat';
 import {Names} from '../../../types/names';
 import {MessageElements} from './messages';
-import {Remarkable} from 'remarkable';
 
 export class MessagesBase {
   messageElementRefs: MessageElements[] = [];
@@ -37,7 +37,7 @@ export class MessagesBase {
   constructor(deepChat: DeepChat) {
     this.elementRef = MessagesBase.createContainerElement();
     this.messageStyles = Legacy.processMessageStyles(deepChat.messageStyles);
-    this._remarkable = RemarkableConfig.createNew();
+    this._remarkable = RemarkableConfig.createNew(deepChat.remarkableConfig);
     this._avatars = deepChat.avatars;
     this._names = deepChat.names;
     this._onMessage = FireEvents.onMessage.bind(this, deepChat);
@@ -223,8 +223,8 @@ export class MessagesBase {
   }
 
   // this is mostly used for enabling highlight.js to highlight code if it downloads later
-  protected refreshTextMessages() {
-    this._remarkable = RemarkableConfig.createNew();
+  protected refreshTextMessages(config?: RemarkableOptions) {
+    this._remarkable = RemarkableConfig.createNew(config);
     this.messageToElements.forEach((msgToEls) => {
       if (msgToEls[1].text && msgToEls[0].text) this.renderText(msgToEls[1].text.bubbleElement, msgToEls[0].text);
     });

component/src/views/chat/messages/remarkable/remarkableConfig.ts

@@ -1,4 +1,4 @@
-import {Remarkable} from 'remarkable';
+import {Remarkable, RemarkableOptions} from 'remarkable';
 import hljs from 'highlight.js';
 
 declare global {
@@ -8,9 +8,11 @@ declare global {
 }
 
 export class RemarkableConfig {
-  private static instantiate() {
-    const hljsModule = window.hljs;
-    if (hljsModule) {
+  private static instantiate(config?: RemarkableOptions) {
+    if (config) {
+      return new Remarkable(config);
+    } else if (window.hljs) {
+      const hljsModule = window.hljs;
       return new Remarkable({
         highlight: function (str, lang) {
           if (lang && hljsModule.getLanguage(lang)) {
@@ -34,16 +36,16 @@ export class RemarkableConfig {
         linkTarget: '_blank', // set target to open in a new tab
         typographer: true, // Enable smartypants and other sweet transforms
       });
-    } else {
+    } else {      
       return new Remarkable({
         breaks: true,
         linkTarget: '_blank', // set target to open in a new tab
       });
     }
   }
 
-  public static createNew() {
-    const remarkable = RemarkableConfig.instantiate();
+  public static createNew(config?: RemarkableOptions) {
+    const remarkable = RemarkableConfig.instantiate(config);
     remarkable.inline.validateLink = () => true;
     return remarkable;
   }