diff --git a/lint-errors.txt b/lint-errors.txt
new file mode 100644
index 00000000..b42ecd5a
Binary files /dev/null and b/lint-errors.txt differ
diff --git a/lint.txt b/lint.txt
new file mode 100644
index 00000000..17f24f18
Binary files /dev/null and b/lint.txt differ
diff --git a/package.json b/package.json
index 2810d888..84d8d9b6 100644
--- a/package.json
+++ b/package.json
@@ -109,4 +109,4 @@
     "not ie <= 11",
     "Safari >= 10"
   ]
-}
+}
\ No newline at end of file
diff --git a/src/components/CodeSelectionMenu.tsx b/src/components/CodeSelectionMenu.tsx
index d2df0c92..498658ae 100644
--- a/src/components/CodeSelectionMenu.tsx
+++ b/src/components/CodeSelectionMenu.tsx
@@ -3,7 +3,6 @@ import { sendMessage } from '../ai-assistant/chatRelay';
 import { CodeSelectionMenuProps } from '../types/components/AIAssistant.types';
 import useAppStore from '../store/store';
 import ReactMarkdown from "react-markdown";
-import * as monaco from 'monaco-editor';
 
 const CodeSelectionMenu: React.FC<CodeSelectionMenuProps> = ({
   selectedText,
@@ -247,70 +246,4 @@ const CodeSelectionMenu: React.FC<CodeSelectionMenuProps> = ({
   );
 };
 
-// eslint-disable-next-line react-refresh/only-export-components
-export const useCodeSelection = (editorType: 'markdown' | 'concerto' | 'json') => {
-  const [selectedText, setSelectedText] = useState('');
-  const [menuPosition, setMenuPosition] = useState<{ x: number; y: number } | null>(null);
-  const [showMenu, setShowMenu] = useState(false);
-  const enableCodeSelectionMenu = useAppStore((state) => state.aiConfig?.enableCodeSelectionMenu ?? true);
-
-
-  const handleSelection = (editor: monaco.editor.IStandaloneCodeEditor) => {
-    const selection = editor.getSelection();
-    if (selection && !selection.isEmpty()) {
-      const selectedText = editor.getModel()?.getValueInRange(selection).trim();
-      if (selectedText && selectedText.length > 0) {
-        const position = editor.getScrolledVisiblePosition(selection.getStartPosition());
-        const editorContainer = editor.getDomNode()?.closest('.editorwrapper');
-        const editorRect = editorContainer?.getBoundingClientRect();
-
-        let x: number, y: number;
-
-        if (editorRect && position) {
-          x = Math.max(editorRect.left + 20, Math.min(position.left, editorRect.right - 150));
-          y = Math.max(editorRect.top + 20, Math.min(position.top, editorRect.bottom - 50));
-
-          x = Math.max(10, Math.min(x, window.innerWidth - 150));
-          y = Math.max(10, Math.min(y, window.innerHeight - 50));
-        } else if (position) {
-          x = Math.max(10, Math.min(position.left, window.innerWidth - 150));
-          y = Math.max(10, Math.min(position.top, window.innerHeight - 50));
-        } else {
-          return;
-        }
-
-        setSelectedText(selectedText);
-        setMenuPosition({
-          x: x,
-          y: y
-        });
-        setShowMenu(true);
-      }
-    } else {
-      setShowMenu(false);
-    }
-  }
-
-  const closeMenu = () => {
-    setShowMenu(false);
-    setSelectedText('');
-    setMenuPosition(null);
-  };
-
-  const MenuComponent = (enableCodeSelectionMenu && showMenu && selectedText && menuPosition) ? (
-    <CodeSelectionMenu
-      selectedText={selectedText}
-      position={menuPosition}
-      onClose={closeMenu}
-      editorType={editorType}
-    />
-  ) : null;
-
-  return {
-    handleSelection,
-    closeMenu,
-    MenuComponent
-  };
-};
-
 export default CodeSelectionMenu;
diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
index faaeb2fa..8360f19b 100644
--- a/src/components/Footer.tsx
+++ b/src/components/Footer.tsx
@@ -32,7 +32,7 @@ const CustomFooter: React.FC = () => {
       <Row justify="space-between" align="middle" gutter={[16, 16]}>
         <Col xs={24} md={12}>
           <Space direction="vertical" size="middle">
-            <Link href="https://www.accordproject.org" target="_blank">
+            <Link href="https://www.accordproject.org" target="_blank" rel="noopener noreferrer">
               <Image
                 src="/logo.png"
                 alt="Template Playground"
@@ -48,7 +48,7 @@ const CustomFooter: React.FC = () => {
                 admin@accordproject.org
               </Text>
             </Link>
-            <Link href="https://discord.com/invite/Zm99SKhhtA" target="_blank">
+            <Link href="https://discord.com/invite/Zm99SKhhtA" target="_blank" rel="noopener noreferrer">
               <Button
                 size="large"
                 style={{
@@ -119,6 +119,7 @@ const CustomFooter: React.FC = () => {
               strong
               href="https://accordproject.org/privacy"
               target="_blank"
+              rel="noopener noreferrer"
               style={{ color: "rgba(255, 255, 255, 0.85)" }}
             >
               trademark policy
@@ -128,6 +129,7 @@ const CustomFooter: React.FC = () => {
               strong
               href="https://accordproject.org/brand-assets"
               target="_blank"
+              rel="noopener noreferrer"
               style={{ color: "rgba(255, 255, 255, 0.85)" }}
             >
               brand assets
@@ -137,16 +139,16 @@ const CustomFooter: React.FC = () => {
 
         <Col>
           <Space>
-            <Link href="https://github.com/accordproject" target="_blank" style={{ color: "rgba(255, 255, 255, 0.85)" }}>
+            <Link href="https://github.com/accordproject" target="_blank" rel="noopener noreferrer" style={{ color: "rgba(255, 255, 255, 0.85)" }}>
               <GithubOutlined style={{ fontSize: "17px" }} />
             </Link>
-            <Link href="https://twitter.com/AccordHQ" target="_blank" style={{ color: "rgba(255, 255, 255, 0.85)" }}>
+            <Link href="https://twitter.com/AccordHQ" target="_blank" rel="noopener noreferrer" style={{ color: "rgba(255, 255, 255, 0.85)" }}>
               <XOutlined style={{ fontSize: "17px" }} />
             </Link>
-            <Link href="https://discord.com/invite/Zm99SKhhtA" target="_blank" style={{ color: "rgba(255, 255, 255, 0.85)" }}>
+            <Link href="https://discord.com/invite/Zm99SKhhtA" target="_blank" rel="noopener noreferrer" style={{ color: "rgba(255, 255, 255, 0.85)" }}>
               <DiscordFilled style={{ fontSize: "17px" }} />
             </Link>
-            <Link href="https://www.linkedin.com/company/accordproject/" target="_blank" style={{ color: "rgba(255, 255, 255, 0.85)" }}>
+            <Link href="https://www.linkedin.com/company/accordproject/" target="_blank" rel="noopener noreferrer" style={{ color: "rgba(255, 255, 255, 0.85)" }}>
               <LinkedinFilled style={{ fontSize: "17px" }} />
             </Link>
           </Space>
diff --git a/src/editors/ConcertoEditor.tsx b/src/editors/ConcertoEditor.tsx
index e63f1525..0c34a673 100644
--- a/src/editors/ConcertoEditor.tsx
+++ b/src/editors/ConcertoEditor.tsx
@@ -2,7 +2,8 @@ import { useMonaco } from "@monaco-editor/react";
 import { lazy, Suspense, useCallback, useEffect, useMemo } from "react";
 import * as monaco from "monaco-editor";
 import useAppStore from "../store/store";
-import { useCodeSelection } from "../components/CodeSelectionMenu";
+import { useCodeSelection } from "../hooks/useCodeSelection";
+import CodeSelectionMenu from "../components/CodeSelectionMenu";
 import { registerAutocompletion } from "../ai-assistant/autocompletion";
 
 const MonacoEditor = lazy(() =>
@@ -119,7 +120,7 @@ export default function ConcertoEditor({
   value,
   onChange,
 }: ConcertoEditorProps) {
-  const { handleSelection, MenuComponent } = useCodeSelection("concerto");
+  const { handleSelection, closeMenu, showMenu, selectedText, menuPosition, enableCodeSelectionMenu } = useCodeSelection();
   const monacoInstance = useMonaco();
   const { error, backgroundColor, aiConfig, showLineNumbers } = useAppStore((state) => ({
     error: state.error,
@@ -215,7 +216,14 @@ export default function ConcertoEditor({
           theme={themeName}
         />
       </Suspense>
-      {MenuComponent}
+      {enableCodeSelectionMenu && showMenu && selectedText && menuPosition && (
+        <CodeSelectionMenu
+          selectedText={selectedText}
+          position={menuPosition}
+          onClose={closeMenu}
+          editorType="concerto"
+        />
+      )}
     </div>
   );
 }
diff --git a/src/editors/JSONEditor.tsx b/src/editors/JSONEditor.tsx
index 75ca64bd..e20e1f92 100644
--- a/src/editors/JSONEditor.tsx
+++ b/src/editors/JSONEditor.tsx
@@ -1,7 +1,8 @@
 import { lazy, Suspense, useMemo, useCallback } from "react";
 import * as monaco from "monaco-editor";
 import useAppStore from "../store/store";
-import { useCodeSelection } from "../components/CodeSelectionMenu";
+import { useCodeSelection } from "../hooks/useCodeSelection";
+import CodeSelectionMenu from "../components/CodeSelectionMenu";
 import { registerAutocompletion } from "../ai-assistant/autocompletion";
 
 const MonacoEditor = lazy(() =>
@@ -17,7 +18,7 @@ export default function JSONEditor({
   onChange?: (value: string | undefined) => void;
   editorRef?: React.MutableRefObject<monaco.editor.IStandaloneCodeEditor | null>;
 }) {
-  const { handleSelection, MenuComponent } = useCodeSelection("json");
+  const { handleSelection, closeMenu, showMenu, selectedText, menuPosition, enableCodeSelectionMenu } = useCodeSelection();
   
   const { backgroundColor, aiConfig, showLineNumbers } = useAppStore((state) => ({
     backgroundColor: state.backgroundColor,
@@ -91,7 +92,14 @@ export default function JSONEditor({
           theme={themeName}
         />
       </Suspense>
-      {MenuComponent}
+      {enableCodeSelectionMenu && showMenu && selectedText && menuPosition && (
+        <CodeSelectionMenu
+          selectedText={selectedText}
+          position={menuPosition}
+          onClose={closeMenu}
+          editorType="json"
+        />
+      )}
     </div>
   );
 }
diff --git a/src/editors/MarkdownEditor.tsx b/src/editors/MarkdownEditor.tsx
index 534d8392..ef470e2b 100644
--- a/src/editors/MarkdownEditor.tsx
+++ b/src/editors/MarkdownEditor.tsx
@@ -1,7 +1,8 @@
 import { lazy, Suspense, useMemo, useCallback, useEffect } from "react";
 import useAppStore from "../store/store";
 import { useMonaco } from "@monaco-editor/react";
-import { useCodeSelection } from "../components/CodeSelectionMenu";
+import { useCodeSelection } from "../hooks/useCodeSelection";
+import CodeSelectionMenu from "../components/CodeSelectionMenu";
 import type { editor } from "monaco-editor";
 import { registerAutocompletion } from "../ai-assistant/autocompletion";
 
@@ -19,7 +20,7 @@ export default function MarkdownEditor({
   onChange?: (value: string | undefined) => void;
   onEditorReady?: (editor: editor.IStandaloneCodeEditor) => void;
 }) {
-  const { handleSelection, MenuComponent } = useCodeSelection("markdown");
+  const { handleSelection, closeMenu, showMenu, selectedText, menuPosition, enableCodeSelectionMenu } = useCodeSelection();
   const { backgroundColor, textColor, aiConfig, showLineNumbers } = useAppStore((state) => ({
     backgroundColor: state.backgroundColor,
     textColor: state.textColor,
@@ -114,7 +115,14 @@ export default function MarkdownEditor({
           theme={themeName}
         />
       </Suspense>
-      {MenuComponent}
+      {enableCodeSelectionMenu && showMenu && selectedText && menuPosition && (
+        <CodeSelectionMenu
+          selectedText={selectedText}
+          position={menuPosition}
+          onClose={closeMenu}
+          editorType="markdown"
+        />
+      )}
     </div>
   );
 }
diff --git a/src/hooks/useCodeSelection.ts b/src/hooks/useCodeSelection.ts
new file mode 100644
index 00000000..8e40dee9
--- /dev/null
+++ b/src/hooks/useCodeSelection.ts
@@ -0,0 +1,61 @@
+import { useState } from 'react';
+import * as monaco from 'monaco-editor';
+import useAppStore from '../store/store';
+
+export const useCodeSelection = () => {
+    const [selectedText, setSelectedText] = useState('');
+    const [menuPosition, setMenuPosition] = useState<{ x: number; y: number } | null>(null);
+    const [showMenu, setShowMenu] = useState(false);
+    const enableCodeSelectionMenu = useAppStore((state) => state.aiConfig?.enableCodeSelectionMenu ?? true);
+
+    const handleSelection = (editor: monaco.editor.IStandaloneCodeEditor) => {
+        const selection = editor.getSelection();
+        if (selection && !selection.isEmpty()) {
+            const selectedText = editor.getModel()?.getValueInRange(selection).trim();
+            if (selectedText && selectedText.length > 0) {
+                const position = editor.getScrolledVisiblePosition(selection.getStartPosition());
+                const editorContainer = editor.getDomNode()?.closest('.editorwrapper');
+                const editorRect = editorContainer?.getBoundingClientRect();
+
+                let x: number, y: number;
+
+                if (editorRect && position) {
+                    x = Math.max(editorRect.left + 20, Math.min(position.left, editorRect.right - 150));
+                    y = Math.max(editorRect.top + 20, Math.min(position.top, editorRect.bottom - 50));
+
+                    x = Math.max(10, Math.min(x, window.innerWidth - 150));
+                    y = Math.max(10, Math.min(y, window.innerHeight - 50));
+                } else if (position) {
+                    x = Math.max(10, Math.min(position.left, window.innerWidth - 150));
+                    y = Math.max(10, Math.min(position.top, window.innerHeight - 50));
+                } else {
+                    return;
+                }
+
+                setSelectedText(selectedText);
+                setMenuPosition({
+                    x: x,
+                    y: y
+                });
+                setShowMenu(true);
+            }
+        } else {
+            setShowMenu(false);
+        }
+    }
+
+    const closeMenu = () => {
+        setShowMenu(false);
+        setSelectedText('');
+        setMenuPosition(null);
+    };
+
+    return {
+        handleSelection,
+        closeMenu,
+        showMenu,
+        selectedText,
+        menuPosition,
+        enableCodeSelectionMenu,
+    };
+};
diff --git a/src/types/markdown-template.d.ts b/src/types/markdown-template.d.ts
new file mode 100644
index 00000000..249f8b01
--- /dev/null
+++ b/src/types/markdown-template.d.ts
@@ -0,0 +1,18 @@
+declare module '@accordproject/markdown-template' {
+    import { ModelManager } from '@accordproject/concerto-core';
+
+    export class TemplateMarkTransformer {
+        fromMarkdownTemplate(options: {
+            fileName: string;
+            content: string;
+            modelManager: ModelManager;
+            templateKind?: string;
+        }): { getModelManager: () => ModelManager };
+
+        toMarkdownTemplate(parserManager: { getModelManager: () => ModelManager }): string;
+
+        generate(data: Record<string, unknown>, parserManager: { getModelManager: () => ModelManager }): string;
+
+        getVariables(parserManager: { getModelManager: () => ModelManager }): Record<string, unknown>;
+    }
+}