README.md: v5.5.0-v3

- Replace free-text license input with a select box
- Improve visual presentation of modals and enhance keyboard interaction

develop/README.md

@@ -77,6 +77,7 @@ each service:
 | `filestore`        | 9235 |
 | `notifications`    | 9236 |
 | `real-time`        | 9237 |
+| `references`       | 9238 |
 | `history-v1`       | 9239 |
 | `project-history`  | 9240 |
 

develop/dev.env

@@ -13,6 +13,7 @@ NOTIFICATIONS_HOST=notifications
 PROJECT_HISTORY_HOST=project-history
 REALTIME_HOST=real-time
 REDIS_HOST=redis
+REFERENCES_HOST=references
 SESSION_SECRET=foo
 WEBPACK_HOST=webpack
 WEB_API_PASSWORD=overleaf

develop/docker-compose.dev.yml

@@ -112,6 +112,17 @@ services:
       - ../services/real-time/app.js:/overleaf/services/real-time/app.js
       - ../services/real-time/config:/overleaf/services/real-time/config
 
+  references:
+    command: ["node", "--watch", "app.js"]
+    environment:
+      - NODE_OPTIONS=--inspect=0.0.0.0:9229
+    ports:
+      - "127.0.0.1:9238:9229"
+    volumes:
+      - ../services/references/app:/overleaf/services/references/app
+      - ../services/references/config:/overleaf/services/references/config
+      - ../services/references/app.js:/overleaf/services/references/app.js
+
   web:
     command: ["node", "--watch", "app.js", "--watch-locales"]
     environment:

develop/docker-compose.yml

@@ -123,7 +123,7 @@ services:
       dockerfile: services/real-time/Dockerfile
     env_file:
       - dev.env
-
+ 
   redis:
     image: redis:5
     ports:
@@ -131,6 +131,13 @@ services:
     volumes:
       - redis-data:/data
 
+  references:
+    build:
+      context: ..
+      dockerfile: services/references/Dockerfile
+    env_file:
+      - dev.env
+
   web:
     build:
       context: ..
@@ -140,7 +147,7 @@ services:
       - dev.env
     environment:
       - APP_NAME=Overleaf Community Edition
-      - ENABLED_LINKED_FILE_TYPES=project_file,project_output_file
+      - ENABLED_LINKED_FILE_TYPES=project_file,project_output_file,url
       - EMAIL_CONFIRMATION_DISABLED=true
       - NODE_ENV=development
       - OVERLEAF_ALLOW_PUBLIC_ACCESS=true
@@ -161,6 +168,7 @@ services:
       - notifications
       - project-history
       - real-time
+      - references
 
   webpack:
     build:

docker-compose.yml

@@ -32,7 +32,7 @@ services:
             OVERLEAF_REDIS_HOST: redis
             REDIS_HOST: redis
 
-            ENABLED_LINKED_FILE_TYPES: 'project_file,project_output_file'
+            ENABLED_LINKED_FILE_TYPES: 'project_file,project_output_file,url'
 
             # Enables Thumbnail generation using ImageMagick
             ENABLE_CONVERSIONS: 'true'

patches/@node-saml+node-saml+4.0.5.patch

@@ -0,0 +1,23 @@
+diff --git a/node_modules/@node-saml/node-saml/lib/saml.js b/node_modules/@node-saml/node-saml/lib/saml.js
+index fba15b9..a5778cb 100644
+--- a/node_modules/@node-saml/node-saml/lib/saml.js
++++ b/node_modules/@node-saml/node-saml/lib/saml.js
+@@ -336,7 +336,8 @@ class SAML {
+         const requestOrResponse = request || response;
+         (0, utility_1.assertRequired)(requestOrResponse, "either request or response is required");
+         let buffer;
+-        if (this.options.skipRequestCompression) {
++       // logout requestOrResponse must be compressed anyway
++        if (this.options.skipRequestCompression && operation !== "logout") {
+             buffer = Buffer.from(requestOrResponse, "utf8");
+         }
+         else {
+@@ -495,7 +496,7 @@ class SAML {
+         try {
+             xml = Buffer.from(container.SAMLResponse, "base64").toString("utf8");
+             doc = await (0, xml_1.parseDomFromString)(xml);
+-            const inResponseToNodes = xml_1.xpath.selectAttributes(doc, "/*[local-name()='Response']/@InResponseTo");
++            const inResponseToNodes = xml_1.xpath.selectAttributes(doc, "/*[local-name()='Response' or local-name()='LogoutResponse']/@InResponseTo");
+             if (inResponseToNodes) {
+                 inResponseTo = inResponseToNodes.length ? inResponseToNodes[0].nodeValue : null;
+                 await this.validateInResponseTo(inResponseTo);

patches/ldapauth-fork+4.3.3.patch

@@ -0,0 +1,64 @@
+diff --git a/node_modules/ldapauth-fork/lib/ldapauth.js b/node_modules/ldapauth-fork/lib/ldapauth.js
+index 85ecf36a8b..a7d07e0f78 100644
+--- a/node_modules/ldapauth-fork/lib/ldapauth.js
++++ b/node_modules/ldapauth-fork/lib/ldapauth.js
+@@ -69,6 +69,7 @@ function LdapAuth(opts) {
+   this.opts.bindProperty || (this.opts.bindProperty = 'dn');
+   this.opts.groupSearchScope || (this.opts.groupSearchScope = 'sub');
+   this.opts.groupDnProperty || (this.opts.groupDnProperty = 'dn');
++  this.opts.tlsStarted = false;
+
+   EventEmitter.call(this);
+
+@@ -108,21 +109,7 @@ function LdapAuth(opts) {
+   this._userClient.on('error', this._handleError.bind(this));
+
+   var self = this;
+-  if (this.opts.starttls) {
+-    // When starttls is enabled, this callback supplants the 'connect' callback
+-    this._adminClient.starttls(this.opts.tlsOptions, this._adminClient.controls, function(err) {
+-      if (err) {
+-        self._handleError(err);
+-      } else {
+-        self._onConnectAdmin();
+-      }
+-    });
+-    this._userClient.starttls(this.opts.tlsOptions, this._userClient.controls, function(err) {
+-      if (err) {
+-        self._handleError(err);
+-      }
+-    });
+-  } else if (opts.reconnect) {
++  if (opts.reconnect && !this.opts.starttls) {
+     this.once('_installReconnectListener', function() {
+       self.log && self.log.trace('install reconnect listener');
+       self._adminClient.on('connect', function() {
+@@ -384,6 +371,28 @@ LdapAuth.prototype._findGroups = function(user, callback) {
+  */
+ LdapAuth.prototype.authenticate = function(username, password, callback) {
+   var self = this;
++  if (this.opts.starttls && !this.opts.tlsStarted) {
++    // When starttls is enabled, this callback supplants the 'connect' callback
++    this._adminClient.starttls(this.opts.tlsOptions, this._adminClient.controls, function (err) {
++      if (err) {
++        self._handleError(err);
++      } else {
++        self._onConnectAdmin(function(){self._handleAuthenticate(username, password, callback);});
++      }
++    });
++    this._userClient.starttls(this.opts.tlsOptions, this._userClient.controls, function (err) {
++      if (err) {
++        self._handleError(err);
++      }
++    });
++  } else {
++    self._handleAuthenticate(username, password, callback);
++  }
++};
++
++LdapAuth.prototype._handleAuthenticate = function (username, password, callback) {
++  this.opts.tlsStarted = true;
++  var self = this;
+
+   if (typeof password === 'undefined' || password === null || password === '') {
+     return callback(new Error('no password given'));

server-ce/config/env.sh

@@ -9,5 +9,6 @@ export HISTORY_V1_HOST=127.0.0.1
 export NOTIFICATIONS_HOST=127.0.0.1
 export PROJECT_HISTORY_HOST=127.0.0.1
 export REALTIME_HOST=127.0.0.1
+export REFERENCES_HOST=127.0.0.1
 export WEB_HOST=127.0.0.1
 export WEB_API_HOST=127.0.0.1

server-ce/runit/references-overleaf/run

@@ -0,0 +1,12 @@
+#!/bin/bash
+
+NODE_PARAMS=""
+if [ "$DEBUG_NODE" == "true" ]; then
+    echo "running debug - references"
+    NODE_PARAMS="--inspect=0.0.0.0:30560"
+fi
+
+source /etc/overleaf/env.sh
+export LISTEN_ADDRESS=127.0.0.1
+
+exec /sbin/setuser www-data /usr/bin/node $NODE_PARAMS /overleaf/services/references/app.js >> /var/log/overleaf/references.log 2>&1

server-ce/services.js

@@ -29,6 +29,9 @@ module.exports = [
   {
     name: 'project-history',
   },
+  {
+    name: 'references',
+  },
   {
     name: 'history-v1',
   },

server-ce/test/docker-compose.yml

@@ -20,7 +20,7 @@ services:
       OVERLEAF_EMAIL_SMTP_HOST: 'mailtrap'
       OVERLEAF_EMAIL_SMTP_PORT: '25'
       OVERLEAF_EMAIL_SMTP_IGNORE_TLS: 'true'
-      ENABLED_LINKED_FILE_TYPES: 'project_file,project_output_file'
+      ENABLED_LINKED_FILE_TYPES: 'project_file,project_output_file,url'
       ENABLE_CONVERSIONS: 'true'
       EMAIL_CONFIRMATION_DISABLED: 'true'
     healthcheck:

services/clsi/app/js/DockerRunner.js

@@ -232,8 +232,8 @@ const DockerRunner = {
       }
     }
     // set the path based on the image year
-    const match = image.match(/:([0-9]+)\.[0-9]+/)
-    const year = match ? match[1] : '2014'
+    const match = image.match(/:([0-9]+)\.[0-9]+|:TL([0-9]+)/)
+    const year = match ? match[1] || match[2] : '2014'
     env.PATH = `/usr/local/sbin:/usr/local/bin:/usr/sbin:/usr/bin:/sbin:/bin:/usr/local/texlive/${year}/bin/x86_64-linux/`
     const options = {
       Cmd: command,

services/clsi/config/settings.defaults.js

@@ -107,7 +107,7 @@ if ((process.env.DOCKER_RUNNER || process.env.SANDBOXED_COMPILES) === 'true') {
         CLSI: 1,
       },
       socketPath: '/var/run/docker.sock',
-      user: process.env.TEXLIVE_IMAGE_USER || 'tex',
+      user: process.env.TEXLIVE_IMAGE_USER || 'www-data',
     },
     optimiseInDocker: true,
     expireProjectAfterIdleMs: 24 * 60 * 60 * 1000,

services/clsi/seccomp/clsi-profile.json

@@ -829,13 +829,19 @@
             "args": []
         },
         {
-          "name": "gettimeofday",
-          "action": "SCMP_ACT_ALLOW",
-          "args": []
-        }, {
-          "name": "epoll_pwait",
-          "action": "SCMP_ACT_ALLOW",
-          "args": []
+            "name": "gettimeofday",
+            "action": "SCMP_ACT_ALLOW",
+            "args": []
+        },
+        {
+            "name": "epoll_pwait",
+            "action": "SCMP_ACT_ALLOW",
+            "args": []
+        },
+        {
+            "name": "poll",
+            "action": "SCMP_ACT_ALLOW",
+            "args": []
         }
     ]
-}
+}

services/filestore/app.js

@@ -111,6 +111,11 @@ if (settings.filestore.stores.template_files) {
     keyBuilder.templateFileKeyMiddleware,
     fileController.insertFile
   )
+  app.delete(
+    '/template/:template_id/v/:version/:format',
+    keyBuilder.templateFileKeyMiddleware,
+    fileController.deleteFile
+  )
 }
 
 app.get(

services/filestore/app/js/FileConverter.js

@@ -5,7 +5,7 @@ const { callbackify } = require('node:util')
 const safeExec = require('./SafeExec').promises
 const { ConversionError } = require('./Errors')
 
-const APPROVED_FORMATS = ['png']
+const APPROVED_FORMATS = ['png', 'jpg']
 const FOURTY_SECONDS = 40 * 1000
 const KILL_SIGNAL = 'SIGTERM'
 
@@ -34,16 +34,14 @@ async function convert(sourcePath, requestedFormat) {
 }
 
 async function thumbnail(sourcePath) {
-  const width = '260x'
-  return await convert(sourcePath, 'png', [
+  const width = '548x'
+  return await _convert(sourcePath, 'jpg', [
     'convert',
     '-flatten',
     '-background',
     'white',
     '-density',
     '300',
-    '-define',
-    `pdf:fit-page=${width}`,
     `${sourcePath}[0]`,
     '-resize',
     width,
@@ -51,16 +49,14 @@ async function thumbnail(sourcePath) {
 }
 
 async function preview(sourcePath) {
-  const width = '548x'
-  return await convert(sourcePath, 'png', [
+  const width = '794x'
+  return await _convert(sourcePath, 'jpg', [
     'convert',
     '-flatten',
     '-background',
     'white',
     '-density',
     '300',
-    '-define',
-    `pdf:fit-page=${width}`,
     `${sourcePath}[0]`,
     '-resize',
     width,

services/filestore/app/js/FileHandler.js

@@ -150,7 +150,9 @@ async function _getConvertedFileAndCache(bucket, key, convertedKey, opts) {
   let convertedFsPath
   try {
     convertedFsPath = await _convertFile(bucket, key, opts)
-    await ImageOptimiser.promises.compressPng(convertedFsPath)
+    if (convertedFsPath.toLowerCase().endsWith(".png")) {
+      await ImageOptimiser.promises.compressPng(convertedFsPath)
+    }
     await PersistorManager.sendFile(bucket, convertedKey, convertedFsPath)
   } catch (err) {
     LocalFileWriter.deleteFile(convertedFsPath, () => {})

services/references/.eslintrc

@@ -0,0 +1,6 @@
+{
+  "parserOptions": {
+    "ecmaVersion": 2022,
+    "sourceType": "module"
+  }
+}

services/references/.gitignore

@@ -0,0 +1,5 @@
+node_modules
+forever
+
+# managed by dev-environment$ bin/update_build_scripts
+.npmrc

services/references/.mocharc.json

@@ -0,0 +1,3 @@
+{
+  "require": "test/setup.js"
+}

services/references/.nvmrc

@@ -0,0 +1 @@
+20.18.2

services/references/Dockerfile

@@ -0,0 +1,27 @@
+# This file was auto-generated, do not edit it directly.
+# Instead run bin/update_build_scripts from
+# https://github.com/overleaf/internal/
+
+FROM node:20.18.2 AS base
+
+WORKDIR /overleaf/services/references
+
+# Google Cloud Storage needs a writable $HOME/.config for resumable uploads
+# (see https://googleapis.dev/nodejs/storage/latest/File.html#createWriteStream)
+RUN mkdir /home/node/.config && chown node:node /home/node/.config
+
+FROM base AS app
+
+COPY package.json package-lock.json /overleaf/
+COPY services/references/package.json /overleaf/services/references/
+COPY libraries/ /overleaf/libraries/
+COPY patches/ /overleaf/patches/
+
+RUN cd /overleaf && npm ci --quiet
+
+COPY services/references/ /overleaf/services/references/
+
+FROM app
+USER node
+
+CMD ["node", "--expose-gc", "app.js"]

services/references/LICENSE

@@ -0,0 +1,662 @@
+
+                    GNU AFFERO GENERAL PUBLIC LICENSE
+                       Version 3, 19 November 2007
+
+ Copyright (C) 2007 Free Software Foundation, Inc. <http://fsf.org/>
+ Everyone is permitted to copy and distribute verbatim copies
+ of this license document, but changing it is not allowed.
+
+                            Preamble
+
+  The GNU Affero General Public License is a free, copyleft license for
+software and other kinds of works, specifically designed to ensure
+cooperation with the community in the case of network server software.
+
+  The licenses for most software and other practical works are designed
+to take away your freedom to share and change the works.  By contrast,
+our General Public Licenses are intended to guarantee your freedom to
+share and change all versions of a program--to make sure it remains free
+software for all its users.
+
+  When we speak of free software, we are referring to freedom, not
+price.  Our General Public Licenses are designed to make sure that you
+have the freedom to distribute copies of free software (and charge for
+them if you wish), that you receive source code or can get it if you
+want it, that you can change the software or use pieces of it in new
+free programs, and that you know you can do these things.
+
+  Developers that use our General Public Licenses protect your rights
+with two steps: (1) assert copyright on the software, and (2) offer
+you this License which gives you legal permission to copy, distribute
+and/or modify the software.
+
+  A secondary benefit of defending all users' freedom is that
+improvements made in alternate versions of the program, if they
+receive widespread use, become available for other developers to
+incorporate.  Many developers of free software are heartened and
+encouraged by the resulting cooperation.  However, in the case of
+software used on network servers, this result may fail to come about.
+The GNU General Public License permits making a modified version and
+letting the public access it on a server without ever releasing its
+source code to the public.
+
+  The GNU Affero General Public License is designed specifically to
+ensure that, in such cases, the modified source code becomes available
+to the community.  It requires the operator of a network server to
+provide the source code of the modified version running there to the
+users of that server.  Therefore, public use of a modified version, on
+a publicly accessible server, gives the public access to the source
+code of the modified version.
+
+  An older license, called the Affero General Public License and
+published by Affero, was designed to accomplish similar goals.  This is
+a different license, not a version of the Affero GPL, but Affero has
+released a new version of the Affero GPL which permits relicensing under
+this license.
+
+  The precise terms and conditions for copying, distribution and
+modification follow.
+
+                       TERMS AND CONDITIONS
+
+  0. Definitions.
+
+  "This License" refers to version 3 of the GNU Affero General Public License.
+
+  "Copyright" also means copyright-like laws that apply to other kinds of
+works, such as semiconductor masks.
+
+  "The Program" refers to any copyrightable work licensed under this
+License.  Each licensee is addressed as "you".  "Licensees" and
+"recipients" may be individuals or organizations.
+
+  To "modify" a work means to copy from or adapt all or part of the work
+in a fashion requiring copyright permission, other than the making of an
+exact copy.  The resulting work is called a "modified version" of the
+earlier work or a work "based on" the earlier work.
+
+  A "covered work" means either the unmodified Program or a work based
+on the Program.
+
+  To "propagate" a work means to do anything with it that, without
+permission, would make you directly or secondarily liable for
+infringement under applicable copyright law, except executing it on a
+computer or modifying a private copy.  Propagation includes copying,
+distribution (with or without modification), making available to the
+public, and in some countries other activities as well.
+
+  To "convey" a work means any kind of propagation that enables other
+parties to make or receive copies.  Mere interaction with a user through
+a computer network, with no transfer of a copy, is not conveying.
+
+  An interactive user interface displays "Appropriate Legal Notices"
+to the extent that it includes a convenient and prominently visible
+feature that (1) displays an appropriate copyright notice, and (2)
+tells the user that there is no warranty for the work (except to the
+extent that warranties are provided), that licensees may convey the
+work under this License, and how to view a copy of this License.  If
+the interface presents a list of user commands or options, such as a
+menu, a prominent item in the list meets this criterion.
+
+  1. Source Code.
+
+  The "source code" for a work means the preferred form of the work
+for making modifications to it.  "Object code" means any non-source
+form of a work.
+
+  A "Standard Interface" means an interface that either is an official
+standard defined by a recognized standards body, or, in the case of
+interfaces specified for a particular programming language, one that
+is widely used among developers working in that language.
+
+  The "System Libraries" of an executable work include anything, other
+than the work as a whole, that (a) is included in the normal form of
+packaging a Major Component, but which is not part of that Major
+Component, and (b) serves only to enable use of the work with that
+Major Component, or to implement a Standard Interface for which an
+implementation is available to the public in source code form.  A
+"Major Component", in this context, means a major essential component
+(kernel, window system, and so on) of the specific operating system
+(if any) on which the executable work runs, or a compiler used to
+produce the work, or an object code interpreter used to run it.
+
+  The "Corresponding Source" for a work in object code form means all
+the source code needed to generate, install, and (for an executable
+work) run the object code and to modify the work, including scripts to
+control those activities.  However, it does not include the work's
+System Libraries, or general-purpose tools or generally available free
+programs which are used unmodified in performing those activities but
+which are not part of the work.  For example, Corresponding Source
+includes interface definition files associated with source files for
+the work, and the source code for shared libraries and dynamically
+linked subprograms that the work is specifically designed to require,
+such as by intimate data communication or control flow between those
+subprograms and other parts of the work.
+
+  The Corresponding Source need not include anything that users
+can regenerate automatically from other parts of the Corresponding
+Source.
+
+  The Corresponding Source for a work in source code form is that
+same work.
+
+  2. Basic Permissions.
+
+  All rights granted under this License are granted for the term of
+copyright on the Program, and are irrevocable provided the stated
+conditions are met.  This License explicitly affirms your unlimited
+permission to run the unmodified Program.  The output from running a
+covered work is covered by this License only if the output, given its
+content, constitutes a covered work.  This License acknowledges your
+rights of fair use or other equivalent, as provided by copyright law.
+
+  You may make, run and propagate covered works that you do not
+convey, without conditions so long as your license otherwise remains
+in force.  You may convey covered works to others for the sole purpose
+of having them make modifications exclusively for you, or provide you
+with facilities for running those works, provided that you comply with
+the terms of this License in conveying all material for which you do
+not control copyright.  Those thus making or running the covered works
+for you must do so exclusively on your behalf, under your direction
+and control, on terms that prohibit them from making any copies of
+your copyrighted material outside their relationship with you.
+
+  Conveying under any other circumstances is permitted solely under
+the conditions stated below.  Sublicensing is not allowed; section 10
+makes it unnecessary.
+
+  3. Protecting Users' Legal Rights From Anti-Circumvention Law.
+
+  No covered work shall be deemed part of an effective technological
+measure under any applicable law fulfilling obligations under article
+11 of the WIPO copyright treaty adopted on 20 December 1996, or
+similar laws prohibiting or restricting circumvention of such
+measures.
+
+  When you convey a covered work, you waive any legal power to forbid
+circumvention of technological measures to the extent such circumvention
+is effected by exercising rights under this License with respect to
+the covered work, and you disclaim any intention to limit operation or
+modification of the work as a means of enforcing, against the work's
+users, your or third parties' legal rights to forbid circumvention of
+technological measures.
+
+  4. Conveying Verbatim Copies.
+
+  You may convey verbatim copies of the Program's source code as you
+receive it, in any medium, provided that you conspicuously and
+appropriately publish on each copy an appropriate copyright notice;
+keep intact all notices stating that this License and any
+non-permissive terms added in accord with section 7 apply to the code;
+keep intact all notices of the absence of any warranty; and give all
+recipients a copy of this License along with the Program.
+
+  You may charge any price or no price for each copy that you convey,
+and you may offer support or warranty protection for a fee.
+
+  5. Conveying Modified Source Versions.
+
+  You may convey a work based on the Program, or the modifications to
+produce it from the Program, in the form of source code under the
+terms of section 4, provided that you also meet all of these conditions:
+
+    a) The work must carry prominent notices stating that you modified
+    it, and giving a relevant date.
+
+    b) The work must carry prominent notices stating that it is
+    released under this License and any conditions added under section
+    7.  This requirement modifies the requirement in section 4 to
+    "keep intact all notices".
+
+    c) You must license the entire work, as a whole, under this
+    License to anyone who comes into possession of a copy.  This
+    License will therefore apply, along with any applicable section 7
+    additional terms, to the whole of the work, and all its parts,
+    regardless of how they are packaged.  This License gives no
+    permission to license the work in any other way, but it does not
+    invalidate such permission if you have separately received it.
+
+    d) If the work has interactive user interfaces, each must display
+    Appropriate Legal Notices; however, if the Program has interactive
+    interfaces that do not display Appropriate Legal Notices, your
+    work need not make them do so.
+
+  A compilation of a covered work with other separate and independent
+works, which are not by their nature extensions of the covered work,
+and which are not combined with it such as to form a larger program,
+in or on a volume of a storage or distribution medium, is called an
+"aggregate" if the compilation and its resulting copyright are not
+used to limit the access or legal rights of the compilation's users
+beyond what the individual works permit.  Inclusion of a covered work
+in an aggregate does not cause this License to apply to the other
+parts of the aggregate.
+
+  6. Conveying Non-Source Forms.
+
+  You may convey a covered work in object code form under the terms
+of sections 4 and 5, provided that you also convey the
+machine-readable Corresponding Source under the terms of this License,
+in one of these ways:
+
+    a) Convey the object code in, or embodied in, a physical product
+    (including a physical distribution medium), accompanied by the
+    Corresponding Source fixed on a durable physical medium
+    customarily used for software interchange.
+
+    b) Convey the object code in, or embodied in, a physical product
+    (including a physical distribution medium), accompanied by a
+    written offer, valid for at least three years and valid for as
+    long as you offer spare parts or customer support for that product
+    model, to give anyone who possesses the object code either (1) a
+    copy of the Corresponding Source for all the software in the
+    product that is covered by this License, on a durable physical
+    medium customarily used for software interchange, for a price no
+    more than your reasonable cost of physically performing this
+    conveying of source, or (2) access to copy the
+    Corresponding Source from a network server at no charge.
+
+    c) Convey individual copies of the object code with a copy of the
+    written offer to provide the Corresponding Source.  This
+    alternative is allowed only occasionally and noncommercially, and
+    only if you received the object code with such an offer, in accord
+    with subsection 6b.
+
+    d) Convey the object code by offering access from a designated
+    place (gratis or for a charge), and offer equivalent access to the
+    Corresponding Source in the same way through the same place at no
+    further charge.  You need not require recipients to copy the
+    Corresponding Source along with the object code.  If the place to
+    copy the object code is a network server, the Corresponding Source
+    may be on a different server (operated by you or a third party)
+    that supports equivalent copying facilities, provided you maintain
+    clear directions next to the object code saying where to find the
+    Corresponding Source.  Regardless of what server hosts the
+    Corresponding Source, you remain obligated to ensure that it is
+    available for as long as needed to satisfy these requirements.
+
+    e) Convey the object code using peer-to-peer transmission, provided
+    you inform other peers where the object code and Corresponding
+    Source of the work are being offered to the general public at no
+    charge under subsection 6d.
+
+  A separable portion of the object code, whose source code is excluded
+from the Corresponding Source as a System Library, need not be
+included in conveying the object code work.
+
+  A "User Product" is either (1) a "consumer product", which means any
+tangible personal property which is normally used for personal, family,
+or household purposes, or (2) anything designed or sold for incorporation
+into a dwelling.  In determining whether a product is a consumer product,
+doubtful cases shall be resolved in favor of coverage.  For a particular
+product received by a particular user, "normally used" refers to a
+typical or common use of that class of product, regardless of the status
+of the particular user or of the way in which the particular user
+actually uses, or expects or is expected to use, the product.  A product
+is a consumer product regardless of whether the product has substantial
+commercial, industrial or non-consumer uses, unless such uses represent
+the only significant mode of use of the product.
+
+  "Installation Information" for a User Product means any methods,
+procedures, authorization keys, or other information required to install
+and execute modified versions of a covered work in that User Product from
+a modified version of its Corresponding Source.  The information must
+suffice to ensure that the continued functioning of the modified object
+code is in no case prevented or interfered with solely because
+modification has been made.
+
+  If you convey an object code work under this section in, or with, or
+specifically for use in, a User Product, and the conveying occurs as
+part of a transaction in which the right of possession and use of the
+User Product is transferred to the recipient in perpetuity or for a
+fixed term (regardless of how the transaction is characterized), the
+Corresponding Source conveyed under this section must be accompanied
+by the Installation Information.  But this requirement does not apply
+if neither you nor any third party retains the ability to install
+modified object code on the User Product (for example, the work has
+been installed in ROM).
+
+  The requirement to provide Installation Information does not include a
+requirement to continue to provide support service, warranty, or updates
+for a work that has been modified or installed by the recipient, or for
+the User Product in which it has been modified or installed.  Access to a
+network may be denied when the modification itself materially and
+adversely affects the operation of the network or violates the rules and
+protocols for communication across the network.
+
+  Corresponding Source conveyed, and Installation Information provided,
+in accord with this section must be in a format that is publicly
+documented (and with an implementation available to the public in
+source code form), and must require no special password or key for
+unpacking, reading or copying.
+
+  7. Additional Terms.
+
+  "Additional permissions" are terms that supplement the terms of this
+License by making exceptions from one or more of its conditions.
+Additional permissions that are applicable to the entire Program shall
+be treated as though they were included in this License, to the extent
+that they are valid under applicable law.  If additional permissions
+apply only to part of the Program, that part may be used separately
+under those permissions, but the entire Program remains governed by
+this License without regard to the additional permissions.
+
+  When you convey a copy of a covered work, you may at your option
+remove any additional permissions from that copy, or from any part of
+it.  (Additional permissions may be written to require their own
+removal in certain cases when you modify the work.)  You may place
+additional permissions on material, added by you to a covered work,
+for which you have or can give appropriate copyright permission.
+
+  Notwithstanding any other provision of this License, for material you
+add to a covered work, you may (if authorized by the copyright holders of
+that material) supplement the terms of this License with terms:
+
+    a) Disclaiming warranty or limiting liability differently from the
+    terms of sections 15 and 16 of this License; or
+
+    b) Requiring preservation of specified reasonable legal notices or
+    author attributions in that material or in the Appropriate Legal
+    Notices displayed by works containing it; or
+
+    c) Prohibiting misrepresentation of the origin of that material, or
+    requiring that modified versions of such material be marked in
+    reasonable ways as different from the original version; or
+
+    d) Limiting the use for publicity purposes of names of licensors or
+    authors of the material; or
+
+    e) Declining to grant rights under trademark law for use of some
+    trade names, trademarks, or service marks; or
+
+    f) Requiring indemnification of licensors and authors of that
+    material by anyone who conveys the material (or modified versions of
+    it) with contractual assumptions of liability to the recipient, for
+    any liability that these contractual assumptions directly impose on
+    those licensors and authors.
+
+  All other non-permissive additional terms are considered "further
+restrictions" within the meaning of section 10.  If the Program as you
+received it, or any part of it, contains a notice stating that it is
+governed by this License along with a term that is a further
+restriction, you may remove that term.  If a license document contains
+a further restriction but permits relicensing or conveying under this
+License, you may add to a covered work material governed by the terms
+of that license document, provided that the further restriction does
+not survive such relicensing or conveying.
+
+  If you add terms to a covered work in accord with this section, you
+must place, in the relevant source files, a statement of the
+additional terms that apply to those files, or a notice indicating
+where to find the applicable terms.
+
+  Additional terms, permissive or non-permissive, may be stated in the
+form of a separately written license, or stated as exceptions;
+the above requirements apply either way.
+
+  8. Termination.
+
+  You may not propagate or modify a covered work except as expressly
+provided under this License.  Any attempt otherwise to propagate or
+modify it is void, and will automatically terminate your rights under
+this License (including any patent licenses granted under the third
+paragraph of section 11).
+
+  However, if you cease all violation of this License, then your
+license from a particular copyright holder is reinstated (a)
+provisionally, unless and until the copyright holder explicitly and
+finally terminates your license, and (b) permanently, if the copyright
+holder fails to notify you of the violation by some reasonable means
+prior to 60 days after the cessation.
+
+  Moreover, your license from a particular copyright holder is
+reinstated permanently if the copyright holder notifies you of the
+violation by some reasonable means, this is the first time you have
+received notice of violation of this License (for any work) from that
+copyright holder, and you cure the violation prior to 30 days after
+your receipt of the notice.
+
+  Termination of your rights under this section does not terminate the
+licenses of parties who have received copies or rights from you under
+this License.  If your rights have been terminated and not permanently
+reinstated, you do not qualify to receive new licenses for the same
+material under section 10.
+
+  9. Acceptance Not Required for Having Copies.
+
+  You are not required to accept this License in order to receive or
+run a copy of the Program.  Ancillary propagation of a covered work
+occurring solely as a consequence of using peer-to-peer transmission
+to receive a copy likewise does not require acceptance.  However,
+nothing other than this License grants you permission to propagate or
+modify any covered work.  These actions infringe copyright if you do
+not accept this License.  Therefore, by modifying or propagating a
+covered work, you indicate your acceptance of this License to do so.
+
+  10. Automatic Licensing of Downstream Recipients.
+
+  Each time you convey a covered work, the recipient automatically
+receives a license from the original licensors, to run, modify and
+propagate that work, subject to this License.  You are not responsible
+for enforcing compliance by third parties with this License.
+
+  An "entity transaction" is a transaction transferring control of an
+organization, or substantially all assets of one, or subdividing an
+organization, or merging organizations.  If propagation of a covered
+work results from an entity transaction, each party to that
+transaction who receives a copy of the work also receives whatever
+licenses to the work the party's predecessor in interest had or could
+give under the previous paragraph, plus a right to possession of the
+Corresponding Source of the work from the predecessor in interest, if
+the predecessor has it or can get it with reasonable efforts.
+
+  You may not impose any further restrictions on the exercise of the
+rights granted or affirmed under this License.  For example, you may
+not impose a license fee, royalty, or other charge for exercise of
+rights granted under this License, and you may not initiate litigation
+(including a cross-claim or counterclaim in a lawsuit) alleging that
+any patent claim is infringed by making, using, selling, offering for
+sale, or importing the Program or any portion of it.
+
+  11. Patents.
+
+  A "contributor" is a copyright holder who authorizes use under this
+License of the Program or a work on which the Program is based.  The
+work thus licensed is called the contributor's "contributor version".
+
+  A contributor's "essential patent claims" are all patent claims
+owned or controlled by the contributor, whether already acquired or
+hereafter acquired, that would be infringed by some manner, permitted
+by this License, of making, using, or selling its contributor version,
+but do not include claims that would be infringed only as a
+consequence of further modification of the contributor version.  For
+purposes of this definition, "control" includes the right to grant
+patent sublicenses in a manner consistent with the requirements of
+this License.
+
+  Each contributor grants you a non-exclusive, worldwide, royalty-free
+patent license under the contributor's essential patent claims, to
+make, use, sell, offer for sale, import and otherwise run, modify and
+propagate the contents of its contributor version.
+
+  In the following three paragraphs, a "patent license" is any express
+agreement or commitment, however denominated, not to enforce a patent
+(such as an express permission to practice a patent or covenant not to
+sue for patent infringement).  To "grant" such a patent license to a
+party means to make such an agreement or commitment not to enforce a
+patent against the party.
+
+  If you convey a covered work, knowingly relying on a patent license,
+and the Corresponding Source of the work is not available for anyone
+to copy, free of charge and under the terms of this License, through a
+publicly available network server or other readily accessible means,
+then you must either (1) cause the Corresponding Source to be so
+available, or (2) arrange to deprive yourself of the benefit of the
+patent license for this particular work, or (3) arrange, in a manner
+consistent with the requirements of this License, to extend the patent
+license to downstream recipients.  "Knowingly relying" means you have
+actual knowledge that, but for the patent license, your conveying the
+covered work in a country, or your recipient's use of the covered work
+in a country, would infringe one or more identifiable patents in that
+country that you have reason to believe are valid.
+
+  If, pursuant to or in connection with a single transaction or
+arrangement, you convey, or propagate by procuring conveyance of, a
+covered work, and grant a patent license to some of the parties
+receiving the covered work authorizing them to use, propagate, modify
+or convey a specific copy of the covered work, then the patent license
+you grant is automatically extended to all recipients of the covered
+work and works based on it.
+
+  A patent license is "discriminatory" if it does not include within
+the scope of its coverage, prohibits the exercise of, or is
+conditioned on the non-exercise of one or more of the rights that are
+specifically granted under this License.  You may not convey a covered
+work if you are a party to an arrangement with a third party that is
+in the business of distributing software, under which you make payment
+to the third party based on the extent of your activity of conveying
+the work, and under which the third party grants, to any of the
+parties who would receive the covered work from you, a discriminatory
+patent license (a) in connection with copies of the covered work
+conveyed by you (or copies made from those copies), or (b) primarily
+for and in connection with specific products or compilations that
+contain the covered work, unless you entered into that arrangement,
+or that patent license was granted, prior to 28 March 2007.
+
+  Nothing in this License shall be construed as excluding or limiting
+any implied license or other defenses to infringement that may
+otherwise be available to you under applicable patent law.
+
+  12. No Surrender of Others' Freedom.
+
+  If conditions are imposed on you (whether by court order, agreement or
+otherwise) that contradict the conditions of this License, they do not
+excuse you from the conditions of this License.  If you cannot convey a
+covered work so as to satisfy simultaneously your obligations under this
+License and any other pertinent obligations, then as a consequence you may
+not convey it at all.  For example, if you agree to terms that obligate you
+to collect a royalty for further conveying from those to whom you convey
+the Program, the only way you could satisfy both those terms and this
+License would be to refrain entirely from conveying the Program.
+
+  13. Remote Network Interaction; Use with the GNU General Public License.
+
+  Notwithstanding any other provision of this License, if you modify the
+Program, your modified version must prominently offer all users
+interacting with it remotely through a computer network (if your version
+supports such interaction) an opportunity to receive the Corresponding
+Source of your version by providing access to the Corresponding Source
+from a network server at no charge, through some standard or customary
+means of facilitating copying of software.  This Corresponding Source
+shall include the Corresponding Source for any work covered by version 3
+of the GNU General Public License that is incorporated pursuant to the
+following paragraph.
+
+  Notwithstanding any other provision of this License, you have
+permission to link or combine any covered work with a work licensed
+under version 3 of the GNU General Public License into a single
+combined work, and to convey the resulting work.  The terms of this
+License will continue to apply to the part which is the covered work,
+but the work with which it is combined will remain governed by version
+3 of the GNU General Public License.
+
+  14. Revised Versions of this License.
+
+  The Free Software Foundation may publish revised and/or new versions of
+the GNU Affero General Public License from time to time.  Such new versions
+will be similar in spirit to the present version, but may differ in detail to
+address new problems or concerns.
+
+  Each version is given a distinguishing version number.  If the
+Program specifies that a certain numbered version of the GNU Affero General
+Public License "or any later version" applies to it, you have the
+option of following the terms and conditions either of that numbered
+version or of any later version published by the Free Software
+Foundation.  If the Program does not specify a version number of the
+GNU Affero General Public License, you may choose any version ever published
+by the Free Software Foundation.
+
+  If the Program specifies that a proxy can decide which future
+versions of the GNU Affero General Public License can be used, that proxy's
+public statement of acceptance of a version permanently authorizes you
+to choose that version for the Program.
+
+  Later license versions may give you additional or different
+permissions.  However, no additional obligations are imposed on any
+author or copyright holder as a result of your choosing to follow a
+later version.
+
+  15. Disclaimer of Warranty.
+
+  THERE IS NO WARRANTY FOR THE PROGRAM, TO THE EXTENT PERMITTED BY
+APPLICABLE LAW.  EXCEPT WHEN OTHERWISE STATED IN WRITING THE COPYRIGHT
+HOLDERS AND/OR OTHER PARTIES PROVIDE THE PROGRAM "AS IS" WITHOUT WARRANTY
+OF ANY KIND, EITHER EXPRESSED OR IMPLIED, INCLUDING, BUT NOT LIMITED TO,
+THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+PURPOSE.  THE ENTIRE RISK AS TO THE QUALITY AND PERFORMANCE OF THE PROGRAM
+IS WITH YOU.  SHOULD THE PROGRAM PROVE DEFECTIVE, YOU ASSUME THE COST OF
+ALL NECESSARY SERVICING, REPAIR OR CORRECTION.
+
+  16. Limitation of Liability.
+
+  IN NO EVENT UNLESS REQUIRED BY APPLICABLE LAW OR AGREED TO IN WRITING
+WILL ANY COPYRIGHT HOLDER, OR ANY OTHER PARTY WHO MODIFIES AND/OR CONVEYS
+THE PROGRAM AS PERMITTED ABOVE, BE LIABLE TO YOU FOR DAMAGES, INCLUDING ANY
+GENERAL, SPECIAL, INCIDENTAL OR CONSEQUENTIAL DAMAGES ARISING OUT OF THE
+USE OR INABILITY TO USE THE PROGRAM (INCLUDING BUT NOT LIMITED TO LOSS OF
+DATA OR DATA BEING RENDERED INACCURATE OR LOSSES SUSTAINED BY YOU OR THIRD
+PARTIES OR A FAILURE OF THE PROGRAM TO OPERATE WITH ANY OTHER PROGRAMS),
+EVEN IF SUCH HOLDER OR OTHER PARTY HAS BEEN ADVISED OF THE POSSIBILITY OF
+SUCH DAMAGES.
+
+  17. Interpretation of Sections 15 and 16.
+
+  If the disclaimer of warranty and limitation of liability provided
+above cannot be given local legal effect according to their terms,
+reviewing courts shall apply local law that most closely approximates
+an absolute waiver of all civil liability in connection with the
+Program, unless a warranty or assumption of liability accompanies a
+copy of the Program in return for a fee.
+
+                     END OF TERMS AND CONDITIONS
+
+            How to Apply These Terms to Your New Programs
+
+  If you develop a new program, and you want it to be of the greatest
+possible use to the public, the best way to achieve this is to make it
+free software which everyone can redistribute and change under these terms.
+
+  To do so, attach the following notices to the program.  It is safest
+to attach them to the start of each source file to most effectively
+state the exclusion of warranty; and each file should have at least
+the "copyright" line and a pointer to where the full notice is found.
+
+    <one line to give the program's name and a brief idea of what it does.>
+    Copyright (C) <year>  <name of author>
+
+    This program is free software: you can redistribute it and/or modify
+    it under the terms of the GNU Affero General Public License as published by
+    the Free Software Foundation, either version 3 of the License, or
+    (at your option) any later version.
+
+    This program is distributed in the hope that it will be useful,
+    but WITHOUT ANY WARRANTY; without even the implied warranty of
+    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+    GNU Affero General Public License for more details.
+
+    You should have received a copy of the GNU Affero General Public License
+    along with this program.  If not, see <http://www.gnu.org/licenses/>.
+
+Also add information on how to contact you by electronic and paper mail.
+
+  If your software can interact with users remotely through a computer
+network, you should also make sure that it provides a way for users to
+get its source.  For example, if your program is a web application, its
+interface could display a "Source" link that leads users to an archive
+of the code.  There are many ways you could offer source, and different
+solutions will be better for different programs; see section 13 for the
+specific requirements.
+
+  You should also get your employer (if you work as a programmer) or school,
+if any, to sign a "copyright disclaimer" for the program, if necessary.
+For more information on this, and how to apply and follow the GNU AGPL, see
+<http://www.gnu.org/licenses/>.

services/references/Makefile

@@ -0,0 +1,156 @@
+# This file was auto-generated, do not edit it directly.
+# Instead run bin/update_build_scripts from
+# https://github.com/overleaf/internal/
+
+BUILD_NUMBER ?= local
+BRANCH_NAME ?= $(shell git rev-parse --abbrev-ref HEAD)
+PROJECT_NAME = references
+BUILD_DIR_NAME = $(shell pwd | xargs basename | tr -cd '[a-zA-Z0-9_.\-]')
+
+DOCKER_COMPOSE_FLAGS ?= -f docker-compose.yml
+DOCKER_COMPOSE := BUILD_NUMBER=$(BUILD_NUMBER) \
+	BRANCH_NAME=$(BRANCH_NAME) \
+	PROJECT_NAME=$(PROJECT_NAME) \
+	MOCHA_GREP=${MOCHA_GREP} \
+	docker compose ${DOCKER_COMPOSE_FLAGS}
+
+COMPOSE_PROJECT_NAME_TEST_ACCEPTANCE ?= test_acceptance_$(BUILD_DIR_NAME)
+DOCKER_COMPOSE_TEST_ACCEPTANCE = \
+	COMPOSE_PROJECT_NAME=$(COMPOSE_PROJECT_NAME_TEST_ACCEPTANCE) $(DOCKER_COMPOSE)
+
+COMPOSE_PROJECT_NAME_TEST_UNIT ?= test_unit_$(BUILD_DIR_NAME)
+DOCKER_COMPOSE_TEST_UNIT = \
+	COMPOSE_PROJECT_NAME=$(COMPOSE_PROJECT_NAME_TEST_UNIT) $(DOCKER_COMPOSE)
+
+clean:
+	-docker rmi ci/$(PROJECT_NAME):$(BRANCH_NAME)-$(BUILD_NUMBER)
+	-docker rmi us-east1-docker.pkg.dev/overleaf-ops/ol-docker/$(PROJECT_NAME):$(BRANCH_NAME)-$(BUILD_NUMBER)
+	-$(DOCKER_COMPOSE_TEST_UNIT) down --rmi local
+	-$(DOCKER_COMPOSE_TEST_ACCEPTANCE) down --rmi local
+
+HERE=$(shell pwd)
+MONOREPO=$(shell cd ../../ && pwd)
+# Run the linting commands in the scope of the monorepo.
+# Eslint and prettier (plus some configs) are on the root.
+RUN_LINTING = docker run --rm -v $(MONOREPO):$(MONOREPO) -w $(HERE) node:20.18.2 npm run --silent
+
+RUN_LINTING_CI = docker run --rm --volume $(MONOREPO)/.editorconfig:/overleaf/.editorconfig --volume $(MONOREPO)/.eslintignore:/overleaf/.eslintignore --volume $(MONOREPO)/.eslintrc:/overleaf/.eslintrc --volume $(MONOREPO)/.prettierignore:/overleaf/.prettierignore --volume $(MONOREPO)/.prettierrc:/overleaf/.prettierrc --volume $(MONOREPO)/tsconfig.backend.json:/overleaf/tsconfig.backend.json ci/$(PROJECT_NAME):$(BRANCH_NAME)-$(BUILD_NUMBER) npm run --silent
+
+# Same but from the top of the monorepo
+RUN_LINTING_MONOREPO = docker run --rm -v $(MONOREPO):$(MONOREPO) -w $(MONOREPO) node:20.18.2 npm run --silent
+
+SHELLCHECK_OPTS = \
+	--shell=bash \
+	--external-sources
+SHELLCHECK_COLOR := $(if $(CI),--color=never,--color)
+SHELLCHECK_FILES := { git ls-files "*.sh" -z; git grep -Plz "\A\#\!.*bash"; } | sort -zu
+
+shellcheck:
+	@$(SHELLCHECK_FILES) | xargs -0 -r docker run --rm -v $(HERE):/mnt -w /mnt \
+		koalaman/shellcheck:stable $(SHELLCHECK_OPTS) $(SHELLCHECK_COLOR)
+
+shellcheck_fix:
+	@$(SHELLCHECK_FILES) | while IFS= read -r -d '' file; do \
+		diff=$$(docker run --rm -v $(HERE):/mnt -w /mnt koalaman/shellcheck:stable $(SHELLCHECK_OPTS) --format=diff "$$file" 2>/dev/null); \
+		if [ -n "$$diff" ] && ! echo "$$diff" | patch -p1 >/dev/null 2>&1; then echo "\033[31m$$file\033[0m"; \
+		elif [ -n "$$diff" ]; then echo "$$file"; \
+		else echo "\033[2m$$file\033[0m"; fi \
+	done
+
+format:
+	$(RUN_LINTING) format
+
+format_ci:
+	$(RUN_LINTING_CI) format
+
+format_fix:
+	$(RUN_LINTING) format:fix
+
+lint:
+	$(RUN_LINTING) lint
+
+lint_ci:
+	$(RUN_LINTING_CI) lint
+
+lint_fix:
+	$(RUN_LINTING) lint:fix
+
+typecheck:
+	$(RUN_LINTING) types:check
+
+typecheck_ci:
+	$(RUN_LINTING_CI) types:check
+
+test: format lint typecheck shellcheck test_unit test_acceptance
+
+test_unit:
+ifneq (,$(wildcard test/unit))
+	$(DOCKER_COMPOSE_TEST_UNIT) run --rm test_unit
+	$(MAKE) test_unit_clean
+endif
+
+test_clean: test_unit_clean
+test_unit_clean:
+ifneq (,$(wildcard test/unit))
+	$(DOCKER_COMPOSE_TEST_UNIT) down -v -t 0
+endif
+
+test_acceptance: test_acceptance_clean test_acceptance_pre_run test_acceptance_run
+	$(MAKE) test_acceptance_clean
+
+test_acceptance_debug: test_acceptance_clean test_acceptance_pre_run test_acceptance_run_debug
+	$(MAKE) test_acceptance_clean
+
+test_acceptance_run:
+ifneq (,$(wildcard test/acceptance))
+	$(DOCKER_COMPOSE_TEST_ACCEPTANCE) run --rm test_acceptance
+endif
+
+test_acceptance_run_debug:
+ifneq (,$(wildcard test/acceptance))
+	$(DOCKER_COMPOSE_TEST_ACCEPTANCE) run -p 127.0.0.9:19999:19999 --rm test_acceptance npm run test:acceptance -- --inspect=0.0.0.0:19999 --inspect-brk
+endif
+
+test_clean: test_acceptance_clean
+test_acceptance_clean:
+	$(DOCKER_COMPOSE_TEST_ACCEPTANCE) down -v -t 0
+
+test_acceptance_pre_run:
+ifneq (,$(wildcard test/acceptance/js/scripts/pre-run))
+	$(DOCKER_COMPOSE_TEST_ACCEPTANCE) run --rm test_acceptance test/acceptance/js/scripts/pre-run
+endif
+
+benchmarks:
+	$(DOCKER_COMPOSE_TEST_ACCEPTANCE) run --rm test_acceptance npm run benchmarks
+
+build:
+	docker build \
+		--pull \
+		--build-arg BUILDKIT_INLINE_CACHE=1 \
+		--tag ci/$(PROJECT_NAME):$(BRANCH_NAME)-$(BUILD_NUMBER) \
+		--tag us-east1-docker.pkg.dev/overleaf-ops/ol-docker/$(PROJECT_NAME):$(BRANCH_NAME)-$(BUILD_NUMBER) \
+		--tag us-east1-docker.pkg.dev/overleaf-ops/ol-docker/$(PROJECT_NAME):$(BRANCH_NAME) \
+		--cache-from us-east1-docker.pkg.dev/overleaf-ops/ol-docker/$(PROJECT_NAME):$(BRANCH_NAME) \
+		--cache-from us-east1-docker.pkg.dev/overleaf-ops/ol-docker/$(PROJECT_NAME):main \
+		--file Dockerfile \
+		../..
+
+tar:
+	$(DOCKER_COMPOSE) up tar
+
+publish:
+
+	docker push $(DOCKER_REPO)/$(PROJECT_NAME):$(BRANCH_NAME)-$(BUILD_NUMBER)
+
+
+.PHONY: clean \
+	format format_fix \
+	lint lint_fix \
+	build_types typecheck \
+	lint_ci format_ci typecheck_ci \
+	shellcheck shellcheck_fix \
+	test test_clean test_unit test_unit_clean \
+	test_acceptance test_acceptance_debug test_acceptance_pre_run \
+	test_acceptance_run test_acceptance_run_debug test_acceptance_clean \
+	benchmarks \
+	build tar publish \

services/references/README.md

@@ -0,0 +1,10 @@
+overleaf/references
+===============
+
+An API for providing citation-keys from user bib-files
+
+License
+=======
+The code in this repository is released under the GNU AFFERO GENERAL PUBLIC LICENSE, version 3.
+
+Based on https://github.com/overleaf/overleaf/commit/9964aebc794f9fd7ce1373ab3484f6b33b061af3

services/references/app.js

@@ -0,0 +1,40 @@
+import '@overleaf/metrics/initialize.js'
+
+import express from 'express'
+import Settings from '@overleaf/settings'
+import logger from '@overleaf/logger'
+import metrics from '@overleaf/metrics'
+import ReferencesAPIController from './app/js/ReferencesAPIController.js'
+import bodyParser from 'body-parser'
+
+const app = express()
+metrics.injectMetricsRoute(app)
+
+app.use(bodyParser.json({ limit: '2mb' }))
+app.use(metrics.http.monitor(logger))
+
+app.post('/project/:project_id/index', ReferencesAPIController.index)
+app.get('/status', (req, res) => res.send({ status: 'references api is up' }))
+
+const settings =
+  Settings.internal && Settings.internal.references
+    ? Settings.internal.references
+    : undefined
+const host = settings && settings.host ? settings.host : 'localhost'
+const port = settings && settings.port ? settings.port : 3056
+
+logger.debug('Listening at', { host, port })
+
+const server = app.listen(port, host, function (error) {
+  if (error) {
+    throw error
+  }
+  logger.info({ host, port }, 'references HTTP server starting up')
+})
+
+process.on('SIGTERM', () => {
+  server.close(() => {
+    logger.info({ host, port }, 'references HTTP server closed')
+    metrics.close()
+  })
+})

services/references/app/js/ReferencesAPIController.js

@@ -0,0 +1,42 @@
+import logger from '@overleaf/logger'
+import BibtexParser from './bib2json.js'
+
+export default {
+  async index(req, res) {
+    const { docUrls, fullIndex } = req.body
+    try {
+      const responses = await Promise.all(
+        docUrls.map(async (docUrl) => {
+          try {
+            const response = await fetch(docUrl)
+            if (!response.ok) {
+              throw new Error(`HTTP error! status: ${response.status}`)
+            }
+            return response.text()
+          } catch (error) {
+            logger.error({ error }, "Failed to fetch document from URL: " + docUrl)
+            return null
+          }
+        })
+      )
+      const keys = []
+      for (const body of responses) {
+        if (!body) continue
+
+        try {
+          const parsedEntries = BibtexParser(body).entries
+          const ks = parsedEntries
+            .filter(entry => entry.EntryKey)
+            .map(entry => entry.EntryKey)
+          keys.push(...ks)
+        } catch (error) {
+          logger.error({ error }, "bib file skipped.")
+        }
+      }
+      res.status(200).json({ keys })
+    } catch (error) {
+      logger.error({ error }, "Unexpected error during indexing process.")
+      res.status(500).json({ error: "Failed to process bib files." })
+    }
+  }
+}

services/references/buildscript.txt

@@ -0,0 +1,9 @@
+references
+--dependencies=mongo
+--docker-repos=us-east1-docker.pkg.dev/overleaf-ops/ol-docker
+--env-add=
+--env-pass-through=
+--esmock-loader=True
+--node-version=20.18.2
+--public-repo=False
+--script-version=4.5.0

services/references/config/settings.defaults.cjs

@@ -0,0 +1,9 @@
+module.exports = {
+  internal: {
+    references: {
+      port: 3056,
+      host: process.env.REFERENCES_HOST || '127.0.0.1',
+    },
+  },
+}
+

services/references/docker-compose.ci.yml

@@ -0,0 +1,52 @@
+# This file was auto-generated, do not edit it directly.
+# Instead run bin/update_build_scripts from
+# https://github.com/overleaf/internal/
+
+version: "2.3"
+
+services:
+  test_unit:
+    image: ci/$PROJECT_NAME:$BRANCH_NAME-$BUILD_NUMBER
+    user: node
+    command: npm run test:unit:_run
+    environment:
+      NODE_ENV: test
+      NODE_OPTIONS: "--unhandled-rejections=strict"
+
+
+  test_acceptance:
+    build: .
+    image: ci/$PROJECT_NAME:$BRANCH_NAME-$BUILD_NUMBER
+    environment:
+      ELASTIC_SEARCH_DSN: es:9200
+      MONGO_HOST: mongo
+      POSTGRES_HOST: postgres
+      MOCHA_GREP: ${MOCHA_GREP}
+      NODE_ENV: test
+      NODE_OPTIONS: "--unhandled-rejections=strict"
+    depends_on:
+      mongo:
+        condition: service_started
+    user: node
+    command: npm run test:acceptance
+
+
+  tar:
+    build: .
+    image: ci/$PROJECT_NAME:$BRANCH_NAME-$BUILD_NUMBER
+    volumes:
+      - ./:/tmp/build/
+    command: tar -czf /tmp/build/build.tar.gz --exclude=build.tar.gz --exclude-vcs .
+    user: root
+  mongo:
+    image: mongo:6.0.13
+    command: --replSet overleaf
+    volumes:
+      - ../../bin/shared/mongodb-init-replica-set.js:/docker-entrypoint-initdb.d/mongodb-init-replica-set.js
+    environment:
+      MONGO_INITDB_DATABASE: sharelatex
+    extra_hosts:
+      # Required when using the automatic database setup for initializing the
+      # replica set. This override is not needed when running the setup after
+      # starting up mongo.
+      - mongo:127.0.0.1

services/references/docker-compose.yml

@@ -0,0 +1,56 @@
+# This file was auto-generated, do not edit it directly.
+# Instead run bin/update_build_scripts from
+# https://github.com/overleaf/internal/
+
+version: "2.3"
+
+services:
+  test_unit:
+    image: node:20.18.2
+    volumes:
+      - .:/overleaf/services/references
+      - ../../node_modules:/overleaf/node_modules
+      - ../../libraries:/overleaf/libraries
+    working_dir: /overleaf/services/references
+    environment:
+      MOCHA_GREP: ${MOCHA_GREP}
+      LOG_LEVEL: ${LOG_LEVEL:-}
+      NODE_ENV: test
+      NODE_OPTIONS: "--unhandled-rejections=strict"
+    command: npm run --silent test:unit
+    user: node
+
+  test_acceptance:
+    image: node:20.18.2
+    volumes:
+      - .:/overleaf/services/references
+      - ../../node_modules:/overleaf/node_modules
+      - ../../libraries:/overleaf/libraries
+    working_dir: /overleaf/services/references
+    environment:
+      ELASTIC_SEARCH_DSN: es:9200
+      MONGO_HOST: mongo
+      POSTGRES_HOST: postgres
+      MOCHA_GREP: ${MOCHA_GREP}
+      LOG_LEVEL: ${LOG_LEVEL:-}
+      NODE_ENV: test
+      NODE_OPTIONS: "--unhandled-rejections=strict"
+    user: node
+    depends_on:
+      mongo:
+        condition: service_started
+    command: npm run --silent test:acceptance
+
+  mongo:
+    image: mongo:6.0.13
+    command: --replSet overleaf
+    volumes:
+      - ../../bin/shared/mongodb-init-replica-set.js:/docker-entrypoint-initdb.d/mongodb-init-replica-set.js
+    environment:
+      MONGO_INITDB_DATABASE: sharelatex
+    extra_hosts:
+      # Required when using the automatic database setup for initializing the
+      # replica set. This override is not needed when running the setup after
+      # starting up mongo.
+      - mongo:127.0.0.1
+

services/references/package.json

@@ -0,0 +1,26 @@
+{
+  "name": "@overleaf/references",
+  "description": "An API for providing citation-keys",
+  "private": true,
+  "type": "module",
+  "main": "app.js",
+  "scripts": {
+    "start": "node app.js"
+  },
+  "version": "0.1.0",
+  "dependencies": {
+    "@overleaf/settings": "*",
+    "@overleaf/logger": "*",
+    "@overleaf/metrics": "*",
+    "async": "^3.2.5",
+    "express": "^4.21.2"
+  },
+  "devDependencies": {
+    "chai": "^4.3.6",
+    "chai-as-promised": "^7.1.1",
+    "esmock": "^2.6.9",
+    "mocha": "^11.1.0",
+    "sinon": "^9.2.4",
+    "typescript": "^5.0.4"
+  }
+}

services/references/tsconfig.json

@@ -0,0 +1,12 @@
+{
+  "extends": "../../tsconfig.backend.json",
+  "include": [
+    "app.js",
+    "app/js/**/*",
+    "benchmarks/**/*",
+    "config/**/*",
+    "scripts/**/*",
+    "test/**/*",
+    "types"
+  ]
+}

services/web/app/src/Features/Authentication/AuthenticationController.js

@@ -82,6 +82,7 @@ const AuthenticationController = {
       analyticsId: user.analyticsId || user._id,
       alphaProgram: user.alphaProgram || undefined, // only store if set
       betaProgram: user.betaProgram || undefined, // only store if set
+      externalAuth: user.externalAuth || false,
     }
     if (user.isAdmin) {
       lightUser.isAdmin = true

services/web/app/src/Features/Compile/ClsiManager.js

@@ -692,7 +692,7 @@ async function _getContentFromMongo(projectId) {
 
 function _finaliseRequest(projectId, options, project, docs, files) {
   const resources = []
-  let flags
+  let flags = []
   let rootResourcePath = null
   let rootResourcePathOverride = null
   let hasMainFile = false
@@ -771,6 +771,10 @@ function _finaliseRequest(projectId, options, project, docs, files) {
     flags = ['-file-line-error']
   }
 
+  if (process.env.TEX_COMPILER_EXTRA_FLAGS) {
+    flags.push(...process.env.TEX_COMPILER_EXTRA_FLAGS.split(/\s+/).filter(Boolean))
+  }
+
   return {
     compile: {
       options: {

services/web/app/src/Features/Helpers/UrlHelper.js

@@ -32,14 +32,6 @@ module.exports = {
   getCanonicalURL,
   getSafeRedirectPath,
   getSafeAdminDomainRedirect,
-  wrapUrlWithProxy(url) {
-    // TODO: Consider what to do for Community and Enterprise edition?
-    if (!Settings.apis.linkedUrlProxy.url) {
-      throw new Error('no linked url proxy configured')
-    }
-    return `${Settings.apis.linkedUrlProxy.url}?url=${encodeURIComponent(url)}`
-  },
-
   prependHttpIfNeeded(url) {
     if (!url.match('://')) {
       url = `http://${url}`

services/web/app/src/Features/LinkedFiles/UrlAgent.mjs

@@ -72,7 +72,6 @@ function _getUrl(projectId, data, currentUserId) {
   if (!urlValidator.isWebUri(url)) {
     throw new InvalidUrlError(`invalid url: ${url}`)
   }
-  url = UrlHelper.wrapUrlWithProxy(url)
   return url
 }
 

services/web/app/src/Features/PasswordReset/PasswordResetController.mjs

@@ -119,7 +119,7 @@ async function requestReset(req, res, next) {
     OError.tag(err, 'failed to generate and email password reset token', {
       email,
     })
-    if (err.message === 'user does not have permission for change-password') {
+    if (err.message === 'user does not have one or more permissions within change-password') {
       return res.status(403).json({
         message: {
           key: 'no-password-allowed-due-to-sso',

services/web/app/src/Features/PasswordReset/PasswordResetHandler.mjs

@@ -72,6 +72,7 @@ async function getUserForPasswordResetToken(token) {
     'overleaf.id': 1,
     email: 1,
     must_reconfirm: 1,
+    hashedPassword: 1,
   })
 
   await assertUserPermissions(user, ['change-password'])

services/web/app/src/Features/Project/ProjectController.js

@@ -599,7 +599,7 @@ const _ProjectController = {
       }
 
       const isAdminOrTemplateOwner =
-        hasAdminAccess(user) || Settings.templates?.user_id === userId
+        hasAdminAccess(user) || Settings.templates?.nonAdminCanManage
       const showTemplatesServerPro =
         Features.hasFeature('templates-server-pro') && isAdminOrTemplateOwner
 

services/web/app/src/Features/Project/ProjectEditorHandler.js

@@ -4,7 +4,7 @@ const Path = require('path')
 const Features = require('../../infrastructure/Features')
 
 module.exports = ProjectEditorHandler = {
-  trackChangesAvailable: false,
+  trackChangesAvailable: true,
 
   buildProjectModelView(project, members, invites) {
     let owner, ownerFeatures
@@ -22,10 +22,7 @@ module.exports = ProjectEditorHandler = {
       deletedByExternalDataSource: project.deletedByExternalDataSource || false,
       members: [],
       invites: this.buildInvitesView(invites),
-      imageName:
-        project.imageName != null
-          ? Path.basename(project.imageName)
-          : undefined,
+      imageName: project.imageName,
     }
 
     ;({ owner, ownerFeatures, members } =

services/web/app/src/Features/Project/ProjectOptionsHandler.js

@@ -24,7 +24,6 @@ const ProjectOptionsHandler = {
     if (!imageName || !Array.isArray(settings.allowedImageNames)) {
       return
     }
-    imageName = imageName.toLowerCase()
     const isAllowed = settings.allowedImageNames.find(
       allowed => imageName === allowed.imageName
     )
@@ -32,7 +31,7 @@ const ProjectOptionsHandler = {
       throw new Error(`invalid imageName: ${imageName}`)
     }
     const conditions = { _id: projectId }
-    const update = { imageName: settings.imageRoot + '/' + imageName }
+    const update = { imageName: imageName }
     return Project.updateOne(conditions, update, {})
   },
 

services/web/app/src/Features/Templates/TemplatesController.js

@@ -11,21 +11,22 @@ const TemplatesController = {
     // Read split test assignment so that it's available for Pug to read
     await SplitTestHandler.promises.getAssignment(req, res, 'core-pug-bs5')
 
-    const templateVersionId = req.params.Template_version_id
-    const templateId = req.query.id
-    if (!/^[0-9]+$/.test(templateVersionId) || !/^[0-9]+$/.test(templateId)) {
-      logger.err(
-        { templateVersionId, templateId },
-        'invalid template id or version'
-      )
-      return res.sendStatus(400)
-    }
+    const templateId = req.params.Template_version_id
+    const templateVersionId = req.query.version
+//    if (!/^[0-9]+$/.test(templateVersionId) || !/^[0-9]+$/.test(templateId)) {
+//      logger.err(
+//        { templateVersionId, templateId },
+//        'invalid template id or version'
+//      )
+//      return res.sendStatus(400)
+//    }
     const data = {
       templateVersionId,
       templateId,
-      name: req.query.templateName,
-      compiler: ProjectHelper.compilerFromV1Engine(req.query.latexEngine),
-      imageName: req.query.texImage,
+      name: req.query.name,
+      compiler: req.query.compiler,
+      language: req.query.language,
+      imageName: req.query.imageName,
       mainFile: req.query.mainFile,
       brandVariationId: req.query.brandVariationId,
     }
@@ -40,6 +41,7 @@ const TemplatesController = {
 
   async createProjectFromV1Template(req, res) {
     const userId = SessionManager.getLoggedInUserId(req.session)
+
     const project = await TemplatesManager.promises.createProjectFromV1Template(
       req.body.brandVariationId,
       req.body.compiler,
@@ -48,7 +50,8 @@ const TemplatesController = {
       req.body.templateName,
       req.body.templateVersionId,
       userId,
-      req.body.imageName
+      req.body.imageName,
+      req.body.language
     )
     delete req.session.templateData
     if (!project) {

services/web/app/src/Features/Templates/TemplatesManager.js

@@ -18,6 +18,7 @@ const crypto = require('crypto')
 const Errors = require('../Errors/Errors')
 const { pipeline } = require('stream/promises')
 const ClsiCacheManager = require('../Compile/ClsiCacheManager')
+const TIMEOUT = 30000  // 30 sec
 
 const TemplatesManager = {
   async createProjectFromV1Template(
@@ -28,25 +29,19 @@ const TemplatesManager = {
     templateName,
     templateVersionId,
     userId,
-    imageName
+    imageName,
+    language
   ) {
-    const zipUrl = `${settings.apis.v1.url}/api/v1/overleaf/templates/${templateVersionId}`
+    const zipUrl = `${settings.apis.filestore.url}/template/${templateId}/v/${templateVersionId}/zip`
     const zipReq = await fetchStreamWithResponse(zipUrl, {
-      basicAuth: {
-        user: settings.apis.v1.user,
-        password: settings.apis.v1.pass,
-      },
-      signal: AbortSignal.timeout(settings.apis.v1.timeout),
+      signal: AbortSignal.timeout(TIMEOUT),
     })
 
     const projectName = ProjectDetailsHandler.fixProjectName(templateName)
     const dumpPath = `${settings.path.dumpFolder}/${crypto.randomUUID()}`
     const writeStream = fs.createWriteStream(dumpPath)
     try {
-      const attributes = {
-        fromV1TemplateId: templateId,
-        fromV1TemplateVersionId: templateVersionId,
-      }
+      const attributes = {}
       await pipeline(zipReq.stream, writeStream)
 
       if (zipReq.response.status !== 200) {
@@ -78,14 +73,9 @@ const TemplatesManager = {
       await TemplatesManager._setCompiler(project._id, compiler)
       await TemplatesManager._setImage(project._id, imageName)
       await TemplatesManager._setMainFile(project._id, mainFile)
+      await TemplatesManager._setSpellCheckLanguage(project._id, language)
       await TemplatesManager._setBrandVariationId(project._id, brandVariationId)
 
-      const update = {
-        fromV1TemplateId: templateId,
-        fromV1TemplateVersionId: templateVersionId,
-      }
-      await Project.updateOne({ _id: project._id }, update, {})
-
       await prepareClsiCacheInBackground
 
       return project
@@ -102,11 +92,12 @@ const TemplatesManager = {
   },
 
   async _setImage(projectId, imageName) {
-    if (!imageName) {
-      imageName = 'wl_texlive:2018.1'
+    try {
+      await ProjectOptionsHandler.setImageName(projectId, imageName)
+    } catch {
+      logger.warn({ imageName: imageName }, 'not available')
+      await ProjectOptionsHandler.setImageName(projectId, settings.currentImageName)
     }
-
-    await ProjectOptionsHandler.setImageName(projectId, imageName)
   },
 
   async _setMainFile(projectId, mainFile) {
@@ -116,6 +107,13 @@ const TemplatesManager = {
     await ProjectRootDocManager.setRootDocFromName(projectId, mainFile)
   },
 
+  async _setSpellCheckLanguage(projectId, language) {
+    if (language == null) {
+      return
+    }
+    await ProjectOptionsHandler.setSpellCheckLanguage(projectId, language)
+  },
+
   async _setBrandVariationId(projectId, brandVariationId) {
     if (brandVariationId == null) {
       return

services/web/app/src/Features/User/UserController.js

@@ -515,4 +515,5 @@ module.exports = {
   expireDeletedUsersAfterDuration: expressify(expireDeletedUsersAfterDuration),
   ensureAffiliationMiddleware: expressify(ensureAffiliationMiddleware),
   ensureAffiliation,
+  doLogout,
 }

services/web/app/src/Features/User/UserPagesController.mjs

@@ -53,10 +53,8 @@ async function settingsPage(req, res) {
   const reconfirmedViaSAML = _.get(req.session, ['saml', 'reconfirmed'])
   delete req.session.saml
   let shouldAllowEditingDetails = true
-  if (Settings.ldap && Settings.ldap.updateUserDetailsOnLogin) {
-    shouldAllowEditingDetails = false
-  }
-  if (Settings.saml && Settings.saml.updateUserDetailsOnLogin) {
+  const externalAuth = req.user.externalAuth
+  if (externalAuth && Settings[externalAuth].updateUserDetailsOnLogin) {
     shouldAllowEditingDetails = false
   }
   const oauthProviders = Settings.oauthProviders || {}

services/web/app/src/infrastructure/ExpressLocals.js

@@ -106,9 +106,9 @@ module.exports = function (webRouter, privateApiRouter, publicApiRouter) {
 
   webRouter.use(function (req, res, next) {
     req.externalAuthenticationSystemUsed =
-      Features.externalAuthenticationSystemUsed
+      () => !!req?.user?.externalAuth
     res.locals.externalAuthenticationSystemUsed =
-      Features.externalAuthenticationSystemUsed
+      () => !!req?.user?.externalAuth
     req.hasFeature = res.locals.hasFeature = Features.hasFeature
     next()
   })
@@ -428,7 +428,7 @@ module.exports = function (webRouter, privateApiRouter, publicApiRouter) {
       labsEnabled: Settings.labs && Settings.labs.enable,
       wikiEnabled: Settings.overleaf != null || Settings.proxyLearn,
       templatesEnabled:
-        Settings.overleaf != null || Settings.templates?.user_id != null,
+        Settings.overleaf != null || Boolean(Settings.templates),
       cioWriteKey: Settings.analytics?.cio?.writeKey,
       cioSiteId: Settings.analytics?.cio?.siteId,
     }

services/web/app/src/infrastructure/Features.js

@@ -12,8 +12,6 @@ const trackChangesModuleAvailable =
 /**
  * @typedef {Object} Settings
  * @property {Object | undefined}  apis
- * @property {Object | undefined}  apis.linkedUrlProxy
- * @property {string | undefined}  apis.linkedUrlProxy.url
  * @property {Object | undefined}  apis.references
  * @property {string | undefined}  apis.references.url
  * @property {boolean | undefined} enableGithubSync
@@ -69,7 +67,7 @@ const Features = {
       case 'oauth':
         return Boolean(Settings.oauth)
       case 'templates-server-pro':
-        return Boolean(Settings.templates?.user_id)
+        return Boolean(Settings.templates)
       case 'affiliations':
       case 'analytics':
         return Boolean(_.get(Settings, ['apis', 'v1', 'url']))
@@ -85,8 +83,7 @@ const Features = {
         )
       case 'link-url':
         return Boolean(
-          _.get(Settings, ['apis', 'linkedUrlProxy', 'url']) &&
-            Settings.enabledLinkedFileTypes.includes('url')
+          Settings.enabledLinkedFileTypes.includes('url')
         )
       case 'project-history-blobs':
         return Boolean(Settings.enableProjectHistoryBlobs)

services/web/app/src/router.mjs

@@ -217,6 +217,8 @@ async function initialize(webRouter, privateApiRouter, publicApiRouter) {
     CaptchaMiddleware.canSkipCaptcha
   )
 
+  await Modules.applyRouter(webRouter, privateApiRouter, publicApiRouter)
+
   webRouter.get('/login', UserPagesController.loginPage)
   AuthenticationController.addEndpointToLoginWhitelist('/login')
 
@@ -262,6 +264,8 @@ async function initialize(webRouter, privateApiRouter, publicApiRouter) {
     '/read-only/one-time-login'
   )
 
+  await Modules.applyRouter(webRouter, privateApiRouter, publicApiRouter)
+
   webRouter.post('/logout', UserController.logout)
 
   webRouter.get('/restricted', AuthorizationMiddleware.restricted)
@@ -285,8 +289,6 @@ async function initialize(webRouter, privateApiRouter, publicApiRouter) {
   TokenAccessRouter.apply(webRouter)
   HistoryRouter.apply(webRouter, privateApiRouter)
 
-  await Modules.applyRouter(webRouter, privateApiRouter, publicApiRouter)
-
   if (Settings.enableSubscriptions) {
     webRouter.get(
       '/user/bonus',
@@ -1265,6 +1267,10 @@ async function initialize(webRouter, privateApiRouter, publicApiRouter) {
     TokenAccessController.grantTokenAccessReadOnly
   )
 
+  webRouter.get(['/learn*', '/blog*', '/latex*', '/for/*', '/contact*'], (req, res) => {
+    res.redirect(301, `https://www.overleaf.com${req.originalUrl}`)
+  })
+
   webRouter.get('/unsupported-browser', renderUnsupportedBrowserPage)
 
   webRouter.get('*', ErrorController.notFound)

services/web/app/views/layout/navbar-marketing-bootstrap-5.pug

@@ -146,6 +146,18 @@ nav.navbar.navbar-default.navbar-main.navbar-expand-lg(class={
 									event-segmentation={ page: currentUrl, item: 'register', location: 'top-menu' }
 								) #{translate('sign_up')}
 
+						// templates link
+						if settings.templates
+							+nav-item
+								+nav-link(
+									href="/templates"
+									event-tracking="menu-click"
+									event-tracking-action="clicked"
+									event-tracking-trigger="click"
+									event-tracking-mb="true"
+									event-segmentation={ page: currentUrl, item: 'templates', location: 'top-menu' }
+								) #{translate('templates')}
+
 						// login link
 						+nav-item
 							+nav-link(

services/web/app/views/layout/navbar-marketing.pug

@@ -140,6 +140,18 @@ nav.navbar.navbar-default.navbar-main(class={
 
 					// logged out
 					if !getSessionUser()
+						// templates link
+						if settings.templates
+							li
+								a(
+									href="/templates"
+									event-tracking="menu-click"
+									event-tracking-action="clicked"
+									event-tracking-trigger="click"
+									event-tracking-mb="true"
+									event-segmentation={ page: currentUrl, item: 'templates', location: 'top-menu' }
+								) #{translate('templates')}
+
 						// register link
 						if hasFeature('registration-page')
 							li.primary

services/web/app/views/project/editor/new_from_template.pug

@@ -31,8 +31,10 @@ block content
     input(type="hidden" name="templateVersionId" value=templateVersionId)
     input(type="hidden" name="templateName" value=name)
     input(type="hidden" name="compiler" value=compiler)
-    input(type="hidden" name="imageName" value=imageName)
+    if imageName
+      input(type="hidden" name="imageName" value=imageName)
     input(type="hidden" name="mainFile" value=mainFile)
+    input(type="hidden" name="language" value=language)
     if brandVariationId
       input(type="hidden" name="brandVariationId" value=brandVariationId)
     input(hidden type="submit")

services/web/app/views/template_gallery/template-gallery.pug

@@ -0,0 +1,18 @@
+extends ../layout-react
+
+block entrypointVar
+	- entrypoint = 'pages/template-gallery'
+
+block vars
+block vars
+	- const suppressNavContentLinks = true
+	- const suppressNavbar = true
+	- const suppressFooter = true
+	- bootstrap5PageStatus = 'enabled' // One of 'disabled', 'enabled', and 'queryStringOnly'
+	- isWebsiteRedesign = false
+
+block append meta
+	meta(name="ol-templateCategory" data-type="string" content=category)
+
+block content
+	#template-gallery-root

services/web/app/views/template_gallery/template.pug

@@ -0,0 +1,20 @@
+extends ../layout-react
+
+block entrypointVar
+	- entrypoint = 'pages/template'
+
+block vars
+	- const suppressNavContentLinks = true
+	- const suppressNavbar = true
+	- const suppressFooter = true
+	- bootstrap5PageStatus = 'enabled' // One of 'disabled', 'enabled', and 'queryStringOnly'
+	- isWebsiteRedesign = false
+
+block append meta
+	meta(name="ol-template" data-type="json" content=template)
+	meta(name="ol-languages" data-type="json" content=languages)
+	meta(name="ol-userIsAdmin" data-type="boolean" content=hasAdminAccess())
+
+block content
+	#template-root
+

services/web/app/views/user/login.pug

@@ -23,10 +23,10 @@ block content
 									| !{translate('password_compromised_try_again_or_use_known_device_or_reset', {}, [{name: 'a', attrs: {href: 'https://haveibeenpwned.com/passwords', rel: 'noopener noreferrer', target: '_blank'}}, {name: 'a', attrs: {href: '/user/password/reset', target: '_blank'}}])}.
 								.form-group
 									input.form-control(
-										type='email',
+										type=(settings.ldap && settings.ldap.enable) ? 'text' : 'email',
 										name='email',
 										required,
-										placeholder='email@example.com',
+										placeholder=(settings.ldap && settings.ldap.enable) ? settings.ldap.placeholder : 'email@example.com',
 										autofocus="true"
 									)
 								.form-group
@@ -47,4 +47,21 @@ block content
 								if login_support_text
 									hr
 									p.text-center !{login_support_text}	
-		
+							if settings.saml && settings.saml.enable
+								.actions(style='margin-top: 30px;')
+									a.button.btn-secondary.btn(
+									href='/saml/login',
+										style="width: 100%;"
+										data-ol-disabled-inflight
+									)
+										span(data-ol-inflight="idle") #{settings.saml.identityServiceName}
+										span(hidden data-ol-inflight="pending") #{translate("logging_in")}…
+							if settings.oidc && settings.oidc.enable
+								.actions(style='margin-top: 30px;')
+									a.button.btn-secondary.btn(
+										href='/oidc/login',
+										style="width: 100%;"
+										data-ol-disabled-inflight
+									)
+										span(data-ol-inflight="idle") #{settings.oidc.identityServiceName}
+										span(hidden data-ol-inflight="pending") #{translate("logging_in")}…

services/web/app/views/user/passwordReset.pug

@@ -52,7 +52,7 @@ block content
 								.notification-content-and-cta
 									.notification-content
 										p
-											| !{translate("you_cant_reset_password_due_to_sso", {}, [{name: 'a', attrs: {href: '/sso-login'}}])}
+											| !{translate("you_cant_reset_password_due_to_ldap_or_sso")}
 
 						input(type="hidden", name="_csrf", value=csrfToken)
 						.form-group.mb-3

services/web/config/settings.defaults.js

@@ -264,6 +264,9 @@ module.exports = {
     notifications: {
       url: `http://${process.env.NOTIFICATIONS_HOST || '127.0.0.1'}:3042`,
     },
+    references: {
+      url: `http://${process.env.REFERENCES_HOST || '127.0.0.1'}:3056`,
+    },
     webpack: {
       url: `http://${process.env.WEBPACK_HOST || '127.0.0.1'}:3808`,
     },
@@ -971,7 +974,7 @@ module.exports = {
     pdfPreviewPromotions: [],
     diagnosticActions: [],
     sourceEditorCompletionSources: [],
-    sourceEditorSymbolPalette: [],
+    sourceEditorSymbolPalette: ['@/features/symbol-palette/components/symbol-palette'],
     sourceEditorToolbarComponents: [],
     mainEditorLayoutModals: [],
     langFeedbackLinkingWidgets: [],
@@ -981,7 +984,7 @@ module.exports = {
     importProjectFromGithubModalWrapper: [],
     importProjectFromGithubMenu: [],
     editorLeftMenuSync: [],
-    editorLeftMenuManageTemplate: [],
+    editorLeftMenuManageTemplate: ['@/features/editor-left-menu/components/actions-manage-template'],
     oauth2Server: [],
     managedGroupSubscriptionEnrollmentNotification: [],
     managedGroupEnrollmentInvite: [],
@@ -1005,6 +1008,13 @@ module.exports = {
     'launchpad',
     'server-ce-scripts',
     'user-activate',
+    'sandboxed-compiles',
+    'symbol-palette',
+    'track-changes',
+    'authentication/ldap',
+    'authentication/saml',
+    'authentication/oidc',
+    'template-gallery',
   ],
   viewIncludes: {},
 
@@ -1031,6 +1041,20 @@ module.exports = {
   managedUsers: {
     enabled: false,
   },
+
+  oauthProviders: {
+    ...(process.env.EXTERNAL_AUTH && process.env.EXTERNAL_AUTH.includes('oidc') && {
+      [process.env.OVERLEAF_OIDC_PROVIDER_ID || 'oidc']: {
+        name: process.env.OVERLEAF_OIDC_PROVIDER_NAME || 'OIDC Provider',
+        descriptionKey: process.env.OVERLEAF_OIDC_PROVIDER_DESCRIPTION,
+        descriptionOptions: { link: process.env.OVERLEAF_OIDC_PROVIDER_INFO_LINK },
+        hideWhenNotLinked: process.env.OVERLEAF_OIDC_PROVIDER_HIDE_NOT_LINKED ?
+          process.env.OVERLEAF_OIDC_PROVIDER_HIDE_NOT_LINKED.toLowerCase() === 'true' : undefined,
+        linkPath: '/oidc/login',
+      },
+    }),
+  },
+
 }
 
 module.exports.mergeWith = function (overrides) {

services/web/frontend/extracted-translations.json

@@ -23,6 +23,7 @@
   "about_to_delete_cert": "",
   "about_to_delete_projects": "",
   "about_to_delete_tag": "",
+  "about_to_delete_template": "",
   "about_to_delete_the_following_project": "",
   "about_to_delete_the_following_projects": "",
   "about_to_delete_user_preamble": "",
@@ -124,6 +125,7 @@
   "all_premium_features_including": "",
   "all_projects": "",
   "all_projects_will_be_transferred_immediately": "",
+  "all_templates": "",
   "all_these_experiments_are_available_exclusively": "",
   "allows_to_search_by_author_title_etc_possible_to_pull_results_directly_from_your_reference_manager_if_connected": "",
   "already_have_a_papers_account": "",
@@ -154,6 +156,7 @@
   "ask_repo_owner_to_reconnect": "",
   "ask_repo_owner_to_renew_overleaf_subscription": "",
   "at_most_x_libraries_can_be_selected": "",
+  "author": "",
   "auto_close_brackets": "",
   "auto_compile": "",
   "auto_complete": "",
@@ -215,6 +218,8 @@
   "card_must_be_authenticated_by_3dsecure": "",
   "card_payment": "",
   "careers": "",
+  "categories": "",
+  "category": "",
   "category_arrows": "",
   "category_greek": "",
   "category_misc": "",
@@ -352,6 +357,7 @@
   "customize_your_group_subscription": "",
   "customizing_figures": "",
   "customizing_tables": "",
+  "date": "",
   "date_and_owner": "",
   "dealing_with_errors": "",
   "decrease_indent": "",
@@ -377,6 +383,7 @@
   "delete_sso_config": "",
   "delete_table": "",
   "delete_tag": "",
+  "delete_template": "",
   "delete_token": "",
   "delete_user": "",
   "delete_your_account": "",
@@ -476,6 +483,7 @@
   "edit_figure": "",
   "edit_sso_configuration": "",
   "edit_tag": "",
+  "edit_template": "",
   "edit_your_custom_dictionary": "",
   "editing": "",
   "editing_captions": "",
@@ -891,6 +899,7 @@
   "last_name": "",
   "last_resort_trouble_shooting_guide": "",
   "last_suggested_fix": "",
+  "last_updated": "",
   "last_updated_date_by_x": "",
   "last_used": "",
   "latam_discount_modal_info": "",
@@ -899,6 +908,8 @@
   "latex_in_thirty_minutes": "",
   "latex_places_figures_according_to_a_special_algorithm": "",
   "latex_places_tables_according_to_a_special_algorithm": "",
+  "latex_templates": "",
+  "latex_templates_for_journal_articles": "",
   "layout": "",
   "layout_options": "",
   "layout_processing": "",
@@ -922,7 +933,8 @@
   "let_us_know_what_you_think": "",
   "lets_get_those_premium_features": "",
   "library": "",
-  "licenses": "",
+  "license": "",
+  "license_for_educational_purposes_confirmation": "",
   "limited_document_history": "",
   "limited_offer": "",
   "limited_to_n_collaborators_per_project": "",
@@ -1106,6 +1118,7 @@
   "no_selection_select_file": "",
   "no_symbols_found": "",
   "no_thanks_cancel_now": "",
+  "no_templates_found": "",
   "normal": "",
   "normally_x_price_per_month": "",
   "normally_x_price_per_year": "",
@@ -1136,6 +1149,7 @@
   "only_importer_can_refresh": "",
   "open_action_menu": "",
   "open_advanced_reference_search": "",
+  "open_as_template": "",
   "open_file": "",
   "open_link": "",
   "open_path": "",
@@ -1161,6 +1175,7 @@
   "overleaf_is_easy_to_use": "",
   "overleaf_labs": "",
   "overleaf_logo": "",
+  "overleaf_template_gallery": "",
   "overleafs_functionality_meets_my_needs": "",
   "overview": "",
   "overwrite": "",
@@ -1223,6 +1238,7 @@
   "please_change_primary_to_remove": "",
   "please_check_your_inbox_to_confirm": "",
   "please_compile_pdf_before_download": "",
+  "please_compile_pdf_before_publish_as_template": "",
   "please_compile_pdf_before_word_count": "",
   "please_confirm_primary_email": "",
   "please_confirm_secondary_email": "",
@@ -1257,6 +1273,7 @@
   "premium_plan_label": "",
   "presentation_mode": "",
   "press_and_awards": "",
+  "prev": "",
   "previous_page": "",
   "price": "",
   "primarily_work_study_question": "",
@@ -1711,6 +1728,7 @@
   "tell_the_project_owner_and_ask_them_to_upgrade": "",
   "template": "",
   "template_description": "",
+  "template_gallery": "",
   "template_title_taken_from_project_title": "",
   "templates": "",
   "temporarily_hides_the_preview": "",
@@ -2106,6 +2124,7 @@
   "you_can_select_or_invite_collaborator": "",
   "you_can_select_or_invite_collaborator_plural": "",
   "you_can_still_use_your_premium_features": "",
+  "you_cant_add_or_change_password_due_to_ldap_or_sso": "",
   "you_cant_add_or_change_password_due_to_sso": "",
   "you_cant_join_this_group_subscription": "",
   "you_dont_have_any_add_ons_on_your_account": "",

services/web/frontend/js/features/editor-left-menu/components/actions-manage-template.tsx

@@ -0,0 +1,72 @@
+import { useCallback, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import * as eventTracking from '../../../infrastructure/event-tracking'
+import getMeta from '../../../utils/meta'
+import OLTooltip from '@/features/ui/components/ol/ol-tooltip'
+import { useDetachCompileContext } from '../../../shared/context/detach-compile-context'
+import EditorManageTemplateModalWrapper from '../../template/components/manage-template-modal/editor-manage-template-modal-wrapper'
+import LeftMenuButton from './left-menu-button'
+
+type TemplateManageResponse = {
+  template_id: string
+}
+
+export default function ActionsManageTemplate() {
+
+  const templatesAdmin = getMeta('ol-showTemplatesServerPro')
+  if (!templatesAdmin) {
+    return null
+  }
+
+  const [showModal, setShowModal] = useState(false)
+  const { pdfFile } = useDetachCompileContext()
+  const { t } = useTranslation()
+
+  const handleShowModal = useCallback(() => {
+    eventTracking.sendMB('left-menu-template')
+    setShowModal(true)
+  }, [])
+
+  const openTemplate = useCallback(
+    ({ template_id: templateId }: TemplateManageResponse) => {
+      location.assign(`/template/${templateId}`)
+    },
+    [location]
+  )
+
+  return (
+    <>
+      {pdfFile ? (
+        <LeftMenuButton onClick={handleShowModal} icon='open_in_new'>
+          {t('publish_as_template')}
+        </LeftMenuButton>
+      ) : (
+        <OLTooltip
+          id="disabled-publish-as-template"
+          description={t('please_compile_pdf_before_publish_as_template')}
+          overlayProps={{
+            placement: 'top',
+          }}
+        >
+          {/* OverlayTrigger won't fire unless the child is a non-react html element (e.g div, span) */}
+          <div>
+            <LeftMenuButton
+              icon='open_in_new'
+              disabled
+              disabledAccesibilityText={t(
+                'please_compile_pdf_before_publish_as_template'
+              )}
+            >
+              {t('publish_as_template')}
+            </LeftMenuButton>
+          </div>
+        </OLTooltip>
+      )}
+      <EditorManageTemplateModalWrapper
+        show={showModal}
+        handleHide={() => setShowModal(false)}
+        openTemplate={openTemplate}
+      />
+    </>
+  )
+}

services/web/frontend/js/features/hotkeys-modal/components/hotkeys-modal-bottom-text.jsx

@@ -10,7 +10,7 @@ export default function HotkeysModalBottomText() {
           // eslint-disable-next-line jsx-a11y/anchor-has-content, react/jsx-key
           <a
             onClick={() => eventTracking.sendMB('left-menu-hotkeys-template')}
-            href="/articles/overleaf-keyboard-shortcuts/qykqfvmxdnjf"
+            href="https://www.overleaf.com/latex/templates/overleaf-keyboard-shortcuts/pphdnzrwmttk"
             target="_blank"
           />,
         ]}

services/web/frontend/js/features/settings/components/linking-section.tsx

@@ -204,7 +204,8 @@ function SSOLinkingWidgetContainer({
   const { t } = useTranslation()
   const { unlink } = useSSOContext()
 
-  let description = ''
+  let description = subscription.provider.descriptionKey ||
+    `${t('login_with_service', { service: subscription.provider.name, })}.`
   switch (subscription.providerId) {
     case 'collabratec':
       description = t('linked_collabratec_description')

services/web/frontend/js/features/settings/components/linking/sso-widget.tsx

@@ -4,6 +4,7 @@ import { FetchError } from '../../../../infrastructure/fetch-json'
 import IEEELogo from '../../../../shared/svgs/ieee-logo'
 import GoogleLogo from '../../../../shared/svgs/google-logo'
 import OrcidLogo from '../../../../shared/svgs/orcid-logo'
+import OpenIDLogo from '../../../../shared/svgs/openid-logo'
 import LinkingStatus from './status'
 import OLButton from '@/features/ui/components/ol/ol-button'
 import OLModal, {
@@ -17,6 +18,7 @@ const providerLogos: { readonly [p: string]: JSX.Element } = {
   collabratec: <IEEELogo />,
   google: <GoogleLogo />,
   orcid: <OrcidLogo />,
+  oidc: <OpenIDLogo />,
 }
 
 type SSOLinkingWidgetProps = {
@@ -66,7 +68,7 @@ export function SSOLinkingWidget({
 
   return (
     <div className="settings-widget-container">
-      <div>{providerLogos[providerId]}</div>
+      <div>{providerLogos[providerId] || providerLogos['oidc']}</div>
       <div className="description-container">
         <div className="title-row">
           <h4 id={providerId}>{title}</h4>

services/web/frontend/js/features/settings/components/password-section.tsx

@@ -39,11 +39,7 @@ function CanOnlyLogInThroughSSO() {
   return (
     <p>
       <Trans
-        i18nKey="you_cant_add_or_change_password_due_to_sso"
-        components={[
-          // eslint-disable-next-line react/jsx-key, jsx-a11y/anchor-has-content
-          <a href="/learn/how-to/Logging_in_with_Group_single_sign-on" />,
-        ]}
+        i18nKey="you_cant_add_or_change_password_due_to_ldap_or_sso"
       />
     </p>
   )

services/web/frontend/js/features/source-editor/hooks/use-codemirror-scope.ts

@@ -185,7 +185,7 @@ function useCodeMirrorScope(view: EditorView) {
 
     if (currentDocument) {
       if (trackChanges) {
-        currentDocument.track_changes_as = userId || 'anonymous'
+        currentDocument.track_changes_as = userId || 'anonymous-user'
       } else {
         currentDocument.track_changes_as = null
       }

services/web/frontend/js/features/symbol-palette/components/symbol-palette-body.js

@@ -0,0 +1,76 @@
+import { useTranslation } from 'react-i18next'
+import PropTypes from 'prop-types'
+import SymbolPaletteItems from './symbol-palette-items'
+
+export default function SymbolPaletteBody({
+  categories,
+  categorisedSymbols,
+  filteredSymbols,
+  handleSelect,
+  focusInput,
+  activeCategoryId,
+}) {
+  const { t } = useTranslation()
+
+  // searching with matches: show the matched symbols
+  // searching with no matches: show a message
+  // note: include empty tab panels so that aria-controls on tabs can still reference the panel ids
+  if (filteredSymbols) {
+    return (
+      <div className="symbol-palette-panels">
+        {filteredSymbols.length ? (
+          <SymbolPaletteItems
+            items={filteredSymbols}
+            handleSelect={handleSelect}
+            focusInput={focusInput}
+          />
+        ) : (
+          <div className="symbol-palette-empty">{t('no_symbols_found')}</div>
+        )}
+
+        {categories.map(category => (
+          <div
+            key={category.id}
+            role="tabpanel"
+            className="symbol-palette-panel"
+            id={`symbol-palette-panel-${category.id}`}
+            aria-labelledby={`symbol-palette-tab-${category.id}`}
+            hidden
+          />
+        ))}
+      </div>
+    )
+  }
+
+  // not searching: show the symbols grouped by category
+  return (
+    <div className="symbol-palette-panels">
+      {categories.map((category) => (
+        <div
+          key={category.id}
+          id={`symbol-palette-panel-${category.id}`}
+          className="symbol-palette-panel"
+          role="tabpanel"
+          aria-labelledby={`symbol-palette-tab-${category.id}`}
+          hidden={category.id !== activeCategoryId}
+        >
+          <SymbolPaletteItems
+            items={categorisedSymbols[category.id]}
+            handleSelect={handleSelect}
+            focusInput={focusInput}
+          />
+        </div>
+      ))}
+    </div>
+  )
+
+
+}
+SymbolPaletteBody.propTypes = {
+  categories: PropTypes.arrayOf(PropTypes.object).isRequired,
+  categorisedSymbols: PropTypes.object,
+  filteredSymbols: PropTypes.arrayOf(PropTypes.object),
+  handleSelect: PropTypes.func.isRequired,
+  focusInput: PropTypes.func.isRequired,
+  activeCategoryId: PropTypes.string.isRequired,
+}

services/web/frontend/js/features/symbol-palette/components/symbol-palette-close-button.js

@@ -0,0 +1,29 @@
+import { useEditorContext } from '../../../shared/context/editor-context'
+import { useTranslation } from 'react-i18next'
+import PropTypes from 'prop-types'
+
+export default function SymbolPaletteCloseButton() {
+  const { toggleSymbolPalette } = useEditorContext()
+  const { t } = useTranslation()
+
+  const handleClick = () => {
+    toggleSymbolPalette()
+    window.dispatchEvent(new CustomEvent('editor:focus'))
+  }
+
+  return (
+    <div className="symbol-palette-close-button-outer">
+      <button
+        type="button"
+        className="btn-close symbol-palette-close-button"
+        onClick={handleClick}
+        aria-label={t('close')}
+      >
+      </button>
+    </div>
+  )
+}
+
+SymbolPaletteCloseButton.propTypes = {
+  focusInput: PropTypes.func,
+}

services/web/frontend/js/features/symbol-palette/components/symbol-palette-content.js

@@ -0,0 +1,94 @@
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import PropTypes from 'prop-types'
+import { matchSorter } from 'match-sorter'
+import symbols from '../data/symbols.json'
+import { buildCategorisedSymbols, createCategories } from '../utils/categories'
+import SymbolPaletteSearch from './symbol-palette-search'
+import SymbolPaletteBody from './symbol-palette-body'
+import SymbolPaletteTabs from './symbol-palette-tabs'
+import SymbolPaletteCloseButton from './symbol-palette-close-button'
+
+export default function SymbolPaletteContent({ handleSelect }) {
+  const [input, setInput] = useState('')
+
+  const { t } = useTranslation()
+
+  // build the list of categories with translated labels
+  const categories = useMemo(() => createCategories(t), [t])
+  const [activeCategoryId, setActiveCategoryId] = useState(categories[0]?.id)
+
+  // group the symbols by category
+  const categorisedSymbols = useMemo(
+    () => buildCategorisedSymbols(categories),
+    [categories]
+  )
+
+  // select symbols which match the input
+  const filteredSymbols = useMemo(() => {
+    if (input === '') {
+      return null
+    }
+
+    const words = input.trim().split(/\s+/)
+
+    return words.reduceRight(
+      (symbols, word) =>
+        matchSorter(symbols, word, {
+          keys: ['command', 'description', 'character', 'aliases'],
+          threshold: matchSorter.rankings.CONTAINS,
+        }),
+      symbols
+    )
+  }, [input])
+
+  const inputRef = useRef(null)
+
+  // allow the input to be focused
+  const focusInput = useCallback(() => {
+    if (inputRef.current) {
+      inputRef.current.focus()
+    }
+  }, [])
+
+  // focus the input when the symbol palette is opened
+  useEffect(() => {
+    if (inputRef.current) {
+      inputRef.current.focus()
+    }
+  }, [])
+  return (
+    <div className="symbol-palette-container">
+      <div className="symbol-palette">
+        <div className="symbol-palette-header-outer">
+          <div className="symbol-palette-header">
+            <SymbolPaletteTabs 
+              categories={categories} 
+              activeCategoryId={activeCategoryId}
+              setActiveCategoryId={setActiveCategoryId}
+            />
+            <div className="symbol-palette-header-group">
+              <SymbolPaletteSearch setInput={setInput} inputRef={inputRef} />
+            </div>
+          </div>
+          <div className="symbol-palette-header-group">
+            <SymbolPaletteCloseButton />
+          </div>
+        </div>
+        <div className="symbol-palette-body">
+          <SymbolPaletteBody
+            categories={categories}
+            categorisedSymbols={categorisedSymbols}
+            filteredSymbols={filteredSymbols}
+            handleSelect={handleSelect}
+            focusInput={focusInput}
+            activeCategoryId={activeCategoryId}
+          />
+        </div>
+      </div>
+    </div>
+  )
+}
+SymbolPaletteContent.propTypes = {
+  handleSelect: PropTypes.func.isRequired,
+}

services/web/frontend/js/features/symbol-palette/components/symbol-palette-item.js

@@ -0,0 +1,84 @@
+import { useEffect, useRef, forwardRef } from 'react'
+import PropTypes from 'prop-types'
+import OLTooltip from '@/features/ui/components/ol/ol-tooltip'
+
+const SymbolPaletteItem = forwardRef(function ({ 
+  focused,
+  handleSelect,
+  handleKeyDown,
+  symbol,
+}, ref) {
+  const buttonRef = useRef(null)
+
+  // Forward internal ref to parent
+  useEffect(() => {
+    if (ref) {
+      if (typeof ref === 'function') {
+        ref(buttonRef.current)
+      } else {
+        ref.current = buttonRef.current
+      }
+    }
+  }, [ref])
+
+  // Focus the item when it becomes focused
+  useEffect(() => {
+    if (
+      focused &&
+      buttonRef.current &&
+      document.activeElement?.closest('.symbol-palette-items')
+    ) {
+      buttonRef.current.focus()
+    }
+  }, [focused])
+
+  return (
+    <OLTooltip
+      id={`symbol-${symbol.codepoint}`}
+      description={
+        <div>
+          <div className="symbol-palette-item-description">
+            {symbol.description}
+          </div>
+          <div className="symbol-palette-item-command">
+            {symbol.command}
+          </div>
+          {symbol.notes && (
+            <div className="symbol-palette-item-notes">
+              {symbol.notes}
+            </div>
+          )}
+        </div>
+      }
+      overlayProps={{ placement: 'top', trigger: ['hover', 'focus'] }}
+    >
+      <button
+        key={symbol.codepoint}
+        className="symbol-palette-item"
+        onClick={() => handleSelect(symbol)}
+        onKeyDown={handleKeyDown}
+        tabIndex={focused ? 0 : -1}
+        ref={buttonRef}
+        role="option"
+        aria-label={symbol.description}
+        aria-selected={focused ? 'true' : 'false'}
+      >
+        {symbol.character}
+      </button>
+    </OLTooltip>
+  )
+})
+
+SymbolPaletteItem.propTypes = {
+  symbol: PropTypes.shape({
+    codepoint: PropTypes.string.isRequired,
+    description: PropTypes.string.isRequired,
+    command: PropTypes.string.isRequired,
+    character: PropTypes.string.isRequired,
+    notes: PropTypes.string,
+  }),
+  handleKeyDown: PropTypes.func.isRequired,
+  handleSelect: PropTypes.func.isRequired,
+  focused: PropTypes.bool,
+}
+export default SymbolPaletteItem

services/web/frontend/js/features/symbol-palette/components/symbol-palette-items.js

@@ -0,0 +1,118 @@
+import { useCallback, useEffect, useRef, useState } from 'react'
+import PropTypes from 'prop-types'
+import { useEditorContext } from '../../../shared/context/editor-context'
+import SymbolPaletteItem from './symbol-palette-item'
+
+export default function SymbolPaletteItems({
+  items,
+  handleSelect,
+  focusInput,
+}) {
+  const [focusedIndex, setFocusedIndex] = useState(0)
+  const itemRefs = useRef([])
+
+  useEffect(() => {
+    itemRefs.current = items.map((_, i) => itemRefs.current[i] || null)
+    setFocusedIndex(0)
+  }, [items])
+
+  const getItemRects = () => {
+    return itemRefs.current.map(ref => ref?.getBoundingClientRect?.() ?? null)
+  }
+  const { toggleSymbolPalette } = useEditorContext()
+
+  const handleKeyDown = useCallback(
+    event => {
+      if (event.metaKey || event.altKey || event.ctrlKey || event.shiftKey) return
+
+      const rects = getItemRects()
+      const currentRect = rects[focusedIndex]
+      if (!currentRect) return
+
+      let newIndex = focusedIndex
+
+      switch (event.key) {
+        case 'ArrowLeft':
+          newIndex = focusedIndex > 0 ? focusedIndex - 1 : items.length - 1
+          break
+        case 'ArrowRight':
+          newIndex = focusedIndex < items.length - 1 ? focusedIndex + 1 : 0
+          break
+        case 'ArrowUp':
+        case 'ArrowDown': {
+          const direction = event.key === 'ArrowUp' ? -1 : 1
+          const candidates = rects
+            .map((rect, i) => ({ rect, i }))
+            .filter(({ rect }, i) =>
+              i !== focusedIndex &&
+              rect &&
+              Math.abs(rect.x - currentRect.x) < currentRect.width * 0.8 &&
+              (direction === -1 ? rect.y < currentRect.y : rect.y > currentRect.y)
+            )
+
+          if (candidates.length > 0) {
+            const closest = candidates.reduce((a, b) =>
+              Math.abs(b.rect.y - currentRect.y) < Math.abs(a.rect.y - currentRect.y) ? b : a
+            )
+            newIndex = closest.i
+          }
+          break
+        }
+        case 'Home':
+          newIndex = 0
+          break
+        case 'End':
+          newIndex = items.length - 1
+          break
+        case 'Enter':
+        case ' ':
+          handleSelect(items[focusedIndex])
+          toggleSymbolPalette()
+          break
+        case 'Escape':
+          toggleSymbolPalette()
+          window.dispatchEvent(new CustomEvent('editor:focus'))
+          break
+
+        default:
+          focusInput()
+          return
+      }
+
+      event.preventDefault()
+      setFocusedIndex(newIndex)
+    },
+    [focusedIndex, items, focusInput, handleSelect]
+  )
+
+  return (
+    <div className="symbol-palette-items" role="listbox" aria-label="Symbols">
+      {items.map((symbol, index) => (
+        <SymbolPaletteItem
+          key={symbol.codepoint}
+          symbol={symbol}
+          handleSelect={symbol => {
+            handleSelect(symbol)
+            setFocusedIndex(index)
+          }}
+          handleKeyDown={handleKeyDown}
+          focused={index === focusedIndex}
+          ref={el => {
+            itemRefs.current[index] = el
+          }}
+        />
+      ))}
+    </div>
+  )
+}
+
+SymbolPaletteItems.propTypes = {
+  items: PropTypes.arrayOf(
+    PropTypes.shape({
+      codepoint: PropTypes.string.isRequired,
+    })
+  ).isRequired,
+  handleSelect: PropTypes.func.isRequired,
+  focusInput: PropTypes.func.isRequired,
+}
+

services/web/frontend/js/features/symbol-palette/components/symbol-palette-search.js

@@ -0,0 +1,45 @@
+import { useCallback, useEffect, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import PropTypes from 'prop-types'
+import OLFormControl from '@/features/ui/components/ol/ol-form-control'
+import useDebounce from '../../../shared/hooks/use-debounce'
+
+export default function SymbolPaletteSearch({ setInput, inputRef }) {
+  const [localInput, setLocalInput] = useState('')
+
+  // debounce the search input until a typing delay
+  const debouncedLocalInput = useDebounce(localInput, 250)
+
+  useEffect(() => {
+    setInput(debouncedLocalInput)
+  }, [debouncedLocalInput, setInput])
+
+  const { t } = useTranslation()
+
+  const inputRefCallback = useCallback(
+    element => {
+      inputRef.current = element
+    },
+    [inputRef]
+  )
+
+  return (
+    <OLFormControl
+      className="symbol-palette-search"
+      type="search"
+      ref={inputRefCallback}
+      id="symbol-palette-input"
+      aria-label="Search"
+      value={localInput}
+      placeholder={t('search') + '…'}
+      onChange={event => {
+        setLocalInput(event.target.value)
+      }}
+    />
+  )
+}
+
+SymbolPaletteSearch.propTypes = {
+  setInput: PropTypes.func.isRequired,
+  inputRef: PropTypes.object.isRequired,
+}

services/web/frontend/js/features/symbol-palette/components/symbol-palette-tabs.js

@@ -0,0 +1,76 @@
+import PropTypes from 'prop-types'
+import { useState, useRef } from 'react'
+
+
+export default function SymbolPaletteTabs({
+  categories,
+  activeCategoryId,
+  setActiveCategoryId,
+}) {
+
+  const buttonRefs = useRef([])
+  const focusTab = (index) => {
+    setActiveCategoryId(categories[index].id)
+    buttonRefs.current[index]?.focus()
+  }
+
+  const handleKeyDown = (e, index) => {
+    switch (e.key) {
+      case 'ArrowRight':
+        focusTab((index + 1) % categories.length)
+        break
+      case 'ArrowLeft':
+        focusTab((index - 1 + categories.length) % categories.length)
+        break
+      case 'Home':
+      case 'PageUp':
+        focusTab(0)
+        break
+      case 'End':
+      case 'PageDown':
+        focusTab(categories.length - 1)
+        break
+      default:
+        break
+    }
+  }
+
+  return (
+    <div
+      role="tablist"
+      aria-label="Symbol Categories"
+      className="symbol-palette-tab-list"
+            tabIndex={0}
+    >
+      {categories.map((category, index) => {
+        const selected = activeCategoryId === category.id
+        return (
+          <button
+            key={category.id}
+            role="tab"
+            type="button"
+            className="symbol-palette-tab"
+            id={`symbol-palette-tab-${category.id}`}
+            aria-controls={`symbol-palette-panel-${category.id}`}
+            aria-selected={selected}
+            tabIndex={selected ? 0 : -1}
+            ref={(el) => (buttonRefs.current[index] = el)}
+            onClick={() => setActiveCategoryId(category.id)}
+            onKeyDown={(e) => handleKeyDown(e, index)}
+          >
+            {category.label}
+          </button>
+        )
+      })}
+    </div>
+  )
+}
+
+SymbolPaletteTabs.propTypes = {
+  categories: PropTypes.arrayOf(PropTypes.shape({
+    id: PropTypes.string.isRequired,
+    label: PropTypes.string.isRequired,
+  })).isRequired,
+  activeCategoryId: PropTypes.string.isRequired,
+  setActiveCategoryId: PropTypes.func.isRequired,
+}

services/web/frontend/js/features/symbol-palette/components/symbol-palette.js

@@ -0,0 +1,8 @@
+import SymbolPaletteContent from './symbol-palette-content'
+
+export default function SymbolPalette() {
+  const handleSelect = (symbol) => {
+    window.dispatchEvent(new CustomEvent('editor:insert-symbol', { detail: symbol }))
+  }
+  return <SymbolPaletteContent handleSelect={handleSelect} />
+}

services/web/frontend/js/features/symbol-palette/data/symbols.json

@@ -0,0 +1,872 @@
+[
+  {
+    "category": "Greek",
+    "command": "\\alpha",
+    "codepoint": "U+1D6FC",
+    "description": "Lowercase Greek letter alpha",
+    "aliases": ["a", "α"],
+    "notes": ""
+  },
+  {
+    "category": "Greek",
+    "command": "\\beta",
+    "codepoint": "U+1D6FD",
+    "description": "Lowercase Greek letter beta",
+    "aliases": ["b", "β"],
+    "notes": ""
+  },
+  {
+    "category": "Greek",
+    "command": "\\gamma",
+    "codepoint": "U+1D6FE",
+    "description": "Lowercase Greek letter gamma",
+    "aliases": ["γ"],
+    "notes": ""
+  },
+  {
+    "category": "Greek",
+    "command": "\\delta",
+    "codepoint": "U+1D6FF",
+    "description": "Lowercase Greek letter delta",
+    "aliases": ["δ"],
+    "notes": ""
+  },
+  {
+    "category": "Greek",
+    "command": "\\varepsilon",
+    "codepoint": "U+1D700",
+    "description": "Lowercase Greek letter epsilon, varepsilon",
+    "aliases": ["ε"],
+    "notes": ""
+  },
+  {
+    "category": "Greek",
+    "command": "\\epsilon",
+    "codepoint": "U+1D716",
+    "description": "Lowercase Greek letter epsilon lunate",
+    "aliases": ["ε"],
+    "notes": ""
+  },
+  {
+    "category": "Greek",
+    "command": "\\zeta",
+    "codepoint": "U+1D701",
+    "description": "Lowercase Greek letter zeta",
+    "aliases": ["ζ"],
+    "notes": ""
+  },
+  {
+    "category": "Greek",
+    "command": "\\eta",
+    "codepoint": "U+1D702",
+    "description": "Lowercase Greek letter eta",
+    "aliases": ["η"],
+    "notes": ""
+  },
+  {
+    "category": "Greek",
+    "command": "\\vartheta",
+    "codepoint": "U+1D717",
+    "description": "Lowercase Greek letter curly theta, vartheta",
+    "aliases": ["θ"],
+    "notes": ""
+  },
+  {
+    "category": "Greek",
+    "command": "\\theta",
+    "codepoint": "U+1D703",
+    "description": "Lowercase Greek letter theta",
+    "aliases": ["θ"],
+    "notes": ""
+  },
+  {
+    "category": "Greek",
+    "command": "\\iota",
+    "codepoint": "U+1D704",
+    "description": "Lowercase Greek letter iota",
+    "aliases": ["ι"],
+    "notes": ""
+  },
+  {
+    "category": "Greek",
+    "command": "\\kappa",
+    "codepoint": "U+1D705",
+    "description": "Lowercase Greek letter kappa",
+    "aliases": ["κ"],
+    "notes": ""
+  },
+  {
+    "category": "Greek",
+    "command": "\\lambda",
+    "codepoint": "U+1D706",
+    "description": "Lowercase Greek letter lambda",
+    "aliases": ["λ"],
+    "notes": ""
+  },
+  {
+    "category": "Greek",
+    "command": "\\mu",
+    "codepoint": "U+1D707",
+    "description": "Lowercase Greek letter mu",
+    "aliases": ["μ"],
+    "notes": ""
+  },
+  {
+    "category": "Greek",
+    "command": "\\nu",
+    "codepoint": "U+1D708",
+    "description": "Lowercase Greek letter nu",
+    "aliases": ["ν"],
+    "notes": ""
+  },
+  {
+    "category": "Greek",
+    "command": "\\xi",
+    "codepoint": "U+1D709",
+    "description": "Lowercase Greek letter xi",
+    "aliases": ["ξ"],
+    "notes": ""
+  },
+  {
+    "category": "Greek",
+    "command": "\\pi",
+    "codepoint": "U+1D70B",
+    "description": "Lowercase Greek letter pi",
+    "aliases": ["π"],
+    "notes": ""
+  },
+  {
+    "category": "Greek",
+    "command": "\\varrho",
+    "codepoint": "U+1D71A",
+    "description": "Lowercase Greek letter rho, varrho",
+    "aliases": ["ρ"],
+    "notes": ""
+  },
+  {
+    "category": "Greek",
+    "command": "\\rho",
+    "codepoint": "U+1D70C",
+    "description": "Lowercase Greek letter rho",
+    "aliases": ["ρ"],
+    "notes": ""
+  },
+  {
+    "category": "Greek",
+    "command": "\\sigma",
+    "codepoint": "U+1D70E",
+    "description": "Lowercase Greek letter sigma",
+    "aliases": ["σ"],
+    "notes": ""
+  },
+  {
+    "category": "Greek",
+    "command": "\\varsigma",
+    "codepoint": "U+1D70D",
+    "description": "Lowercase Greek letter final sigma, varsigma",
+    "aliases": ["ς"],
+    "notes": ""
+  },
+  {
+    "category": "Greek",
+    "command": "\\tau",
+    "codepoint": "U+1D70F",
+    "description": "Lowercase Greek letter tau",
+    "aliases": ["τ"],
+    "notes": ""
+  },
+  {
+    "category": "Greek",
+    "command": "\\upsilon",
+    "codepoint": "U+1D710",
+    "description": "Lowercase Greek letter upsilon",
+    "aliases": ["υ"],
+    "notes": ""
+  },
+  {
+    "category": "Greek",
+    "command": "\\phi",
+    "codepoint": "U+1D719",
+    "description": "Lowercase Greek letter phi",
+    "aliases": ["φ"],
+    "notes": ""
+  },
+  {
+    "category": "Greek",
+    "command": "\\varphi",
+    "codepoint": "U+1D711",
+    "description": "Lowercase Greek letter phi, varphi",
+    "aliases": ["φ"],
+    "notes": ""
+  },
+  {
+    "category": "Greek",
+    "command": "\\chi",
+    "codepoint": "U+1D712",
+    "description": "Lowercase Greek letter chi",
+    "aliases": ["χ"],
+    "notes": ""
+  },
+  {
+    "category": "Greek",
+    "command": "\\psi",
+    "codepoint": "U+1D713",
+    "description": "Lowercase Greek letter psi",
+    "aliases": ["ψ"],
+    "notes": ""
+  },
+  {
+    "category": "Greek",
+    "command": "\\omega",
+    "codepoint": "U+1D714",
+    "description": "Lowercase Greek letter omega",
+    "aliases": ["ω"],
+    "notes": ""
+  },
+  {
+    "category": "Greek",
+    "command": "\\Gamma",
+    "codepoint": "U+00393",
+    "description": "Uppercase Greek letter Gamma",
+    "aliases": ["Γ"],
+    "notes": ""
+  },
+  {
+    "category": "Greek",
+    "command": "\\Delta",
+    "codepoint": "U+00394",
+    "description": "Uppercase Greek letter Delta",
+    "aliases": ["Δ"],
+    "notes": ""
+  },
+  {
+    "category": "Greek",
+    "command": "\\Theta",
+    "codepoint": "U+00398",
+    "description": "Uppercase Greek letter Theta",
+    "aliases": ["Θ"],
+    "notes": ""
+  },
+  {
+    "category": "Greek",
+    "command": "\\Lambda",
+    "codepoint": "U+0039B",
+    "description": "Uppercase Greek letter Lambda",
+    "aliases": ["Λ"],
+    "notes": ""
+  },
+  {
+    "category": "Greek",
+    "command": "\\Xi",
+    "codepoint": "U+0039E",
+    "description": "Uppercase Greek letter Xi",
+    "aliases": ["Ξ"],
+    "notes": ""
+  },
+  {
+    "category": "Greek",
+    "command": "\\Pi",
+    "codepoint": "U+003A0",
+    "description": "Uppercase Greek letter Pi",
+    "aliases": ["Π"],
+    "notes": "Use \\prod for the product."
+  },
+  {
+    "category": "Greek",
+    "command": "\\Sigma",
+    "codepoint": "U+003A3",
+    "description": "Uppercase Greek letter Sigma",
+    "aliases": ["Σ"],
+    "notes": "Use \\sum for the sum."
+  },
+  {
+    "category": "Greek",
+    "command": "\\Upsilon",
+    "codepoint": "U+003A5",
+    "description": "Uppercase Greek letter Upsilon",
+    "aliases": ["Υ"],
+    "notes": ""
+  },
+  {
+    "category": "Greek",
+    "command": "\\Phi",
+    "codepoint": "U+003A6",
+    "description": "Uppercase Greek letter Phi",
+    "aliases": ["Φ"],
+    "notes": ""
+  },
+  {
+    "category": "Greek",
+    "command": "\\Psi",
+    "codepoint": "U+003A8",
+    "description": "Uppercase Greek letter Psi",
+    "aliases": ["Ψ"],
+    "notes": ""
+  },
+  {
+    "category": "Greek",
+    "command": "\\Omega",
+    "codepoint": "U+003A9",
+    "description": "Uppercase Greek letter Omega",
+    "aliases": ["Ω"],
+    "notes": ""
+  },
+  {
+    "category": "Relations",
+    "command": "\\neq",
+    "codepoint": "U+02260",
+    "description": "Not equal",
+    "aliases": ["!="],
+    "notes": ""
+  },
+  {
+    "category": "Relations",
+    "command": "\\leq",
+    "codepoint": "U+02264",
+    "description": "Less than or equal",
+    "aliases": ["<="],
+    "notes": ""
+  },
+  {
+    "category": "Relations",
+    "command": "\\geq",
+    "codepoint": "U+02265",
+    "description": "Greater than or equal",
+    "aliases": [">="],
+    "notes": ""
+  },
+  {
+    "category": "Relations",
+    "command": "\\ll",
+    "codepoint": "U+0226A",
+    "description": "Much less than",
+    "aliases": ["<<"],
+    "notes": ""
+  },
+  {
+    "category": "Relations",
+    "command": "\\gg",
+    "codepoint": "U+0226B",
+    "description": "Much greater than",
+    "aliases": [">>"],
+    "notes": ""
+  },
+  {
+    "category": "Relations",
+    "command": "\\prec",
+    "codepoint": "U+0227A",
+    "description": "Precedes",
+    "notes": ""
+  },
+  {
+    "category": "Relations",
+    "command": "\\succ",
+    "codepoint": "U+0227B",
+    "description": "Succeeds",
+    "notes": ""
+  },
+  {
+    "category": "Relations",
+    "command": "\\in",
+    "codepoint": "U+02208",
+    "description": "Set membership",
+    "notes": ""
+  },
+  {
+    "category": "Relations",
+    "command": "\\notin",
+    "codepoint": "U+02209",
+    "description": "Negated set membership",
+    "notes": ""
+  },
+  {
+    "category": "Relations",
+    "command": "\\ni",
+    "codepoint": "U+0220B",
+    "description": "Contains",
+    "notes": ""
+  },
+  {
+    "category": "Relations",
+    "command": "\\subset",
+    "codepoint": "U+02282",
+    "description": "Subset",
+    "notes": ""
+  },
+  {
+    "category": "Relations",
+    "command": "\\subseteq",
+    "codepoint": "U+02286",
+    "description": "Subset or equals",
+    "notes": ""
+  },
+  {
+    "category": "Relations",
+    "command": "\\supset",
+    "codepoint": "U+02283",
+    "description": "Superset",
+    "notes": ""
+  },
+  {
+    "category": "Relations",
+    "command": "\\simeq",
+    "codepoint": "U+02243",
+    "description": "Similar",
+    "notes": ""
+  },
+  {
+    "category": "Relations",
+    "command": "\\approx",
+    "codepoint": "U+02248",
+    "description": "Approximate",
+    "notes": ""
+  },
+  {
+    "category": "Relations",
+    "command": "\\equiv",
+    "codepoint": "U+02261",
+    "description": "Identical with",
+    "notes": ""
+  },
+  {
+    "category": "Relations",
+    "command": "\\cong",
+    "codepoint": "U+02245",
+    "description": "Congruent with",
+    "notes": ""
+  },
+  {
+    "category": "Relations",
+    "command": "\\mid",
+    "codepoint": "U+02223",
+    "description": "Mid, divides, vertical bar, modulus, absolute value",
+    "notes": "Use \\lvert...\\rvert for the absolute value."
+  },
+  {
+    "category": "Relations",
+    "command": "\\nmid",
+    "codepoint": "U+02224",
+    "description": "Negated mid, not divides",
+    "notes": "Requires \\usepackage{amssymb}."
+  },
+  {
+    "category": "Relations",
+    "command": "\\parallel",
+    "codepoint": "U+02225",
+    "description": "Parallel, double vertical bar, norm",
+    "notes": "Use \\lVert...\\rVert for the norm."
+  },
+  {
+    "category": "Relations",
+    "command": "\\perp",
+    "codepoint": "U+027C2",
+    "description": "Perpendicular",
+    "notes": ""
+  },
+  {
+    "category": "Operators",
+    "command": "\\times",
+    "codepoint": "U+000D7",
+    "description": "Cross product, multiplication",
+    "aliases": ["x"],
+    "notes": ""
+  },
+  {
+    "category": "Operators",
+    "command": "\\div",
+    "codepoint": "U+000F7",
+    "description": "Division",
+    "notes": ""
+  },
+  {
+    "category": "Operators",
+    "command": "\\cap",
+    "codepoint": "U+02229",
+    "description": "Intersection",
+    "notes": ""
+  },
+  {
+    "category": "Operators",
+    "command": "\\cup",
+    "codepoint": "U+0222A",
+    "description": "Union",
+    "notes": ""
+  },
+  {
+    "category": "Operators",
+    "command": "\\cdot",
+    "codepoint": "U+022C5",
+    "description": "Dot product, multiplication",
+    "notes": ""
+  },
+  {
+    "category": "Operators",
+    "command": "\\cdots",
+    "codepoint": "U+022EF",
+    "description": "Centered dots",
+    "notes": ""
+  },
+  {
+    "category": "Operators",
+    "command": "\\bullet",
+    "codepoint": "U+02219",
+    "description": "Bullet",
+    "notes": ""
+  },
+  {
+    "category": "Operators",
+    "command": "\\circ",
+    "codepoint": "U+025E6",
+    "description": "Circle",
+    "notes": ""
+  },
+  {
+    "category": "Operators",
+    "command": "\\wedge",
+    "codepoint": "U+02227",
+    "description": "Wedge, logical and",
+    "notes": ""
+  },
+  {
+    "category": "Operators",
+    "command": "\\vee",
+    "codepoint": "U+02228",
+    "description": "Vee, logical or",
+    "notes": ""
+  },
+  {
+    "category": "Operators",
+    "command": "\\setminus",
+    "codepoint": "U+0005C",
+    "description": "Set minus, backslash",
+    "notes": "Use \\backslash for a backslash."
+  },
+  {
+    "category": "Operators",
+    "command": "\\oplus",
+    "codepoint": "U+02295",
+    "description": "Plus sign in circle",
+    "notes": ""
+  },
+  {
+    "category": "Operators",
+    "command": "\\otimes",
+    "codepoint": "U+02297",
+    "description": "Multiply sign in circle",
+    "notes": ""
+  },
+  {
+    "category": "Operators",
+    "command": "\\sum",
+    "codepoint": "U+02211",
+    "description": "Summation operator",
+    "notes": "Use \\Sigma for the letter Sigma."
+  },
+  {
+    "category": "Operators",
+    "command": "\\prod",
+    "codepoint": "U+0220F",
+    "description": "Product operator",
+    "notes": "Use \\Pi for the letter Pi."
+  },
+  {
+    "category": "Operators",
+    "command": "\\bigcap",
+    "codepoint": "U+022C2",
+    "description": "Intersection operator",
+    "notes": ""
+  },
+  {
+    "category": "Operators",
+    "command": "\\bigcup",
+    "codepoint": "U+022C3",
+    "description": "Union operator",
+    "notes": ""
+  },
+  {
+    "category": "Operators",
+    "command": "\\int",
+    "codepoint": "U+0222B",
+    "description": "Integral operator",
+    "notes": ""
+  },
+  {
+    "category": "Operators",
+    "command": "\\iint",
+    "codepoint": "U+0222C",
+    "description": "Double integral operator",
+    "notes": "Requires \\usepackage{amsmath}."
+  },
+  {
+    "category": "Operators",
+    "command": "\\iiint",
+    "codepoint": "U+0222D",
+    "description": "Triple integral operator",
+    "notes": "Requires \\usepackage{amsmath}."
+  },
+  {
+    "category": "Arrows",
+    "command": "\\leftarrow",
+    "codepoint": "U+02190",
+    "description": "Leftward arrow",
+    "aliases": ["<-"],
+    "notes": ""
+  },
+  {
+    "category": "Arrows",
+    "command": "\\rightarrow",
+    "codepoint": "U+02192",
+    "description": "Rightward arrow",
+    "aliases": ["->"],
+    "notes": ""
+  },
+  {
+    "category": "Arrows",
+    "command": "\\leftrightarrow",
+    "codepoint": "U+02194",
+    "description": "Left and right arrow",
+    "aliases": ["<->"],
+    "notes": ""
+  },
+  {
+    "category": "Arrows",
+    "command": "\\uparrow",
+    "codepoint": "U+02191",
+    "description": "Upward arrow",
+    "notes": ""
+  },
+  {
+    "category": "Arrows",
+    "command": "\\downarrow",
+    "codepoint": "U+02193",
+    "description": "Downward arrow",
+    "notes": ""
+  },
+  {
+    "category": "Arrows",
+    "command": "\\Leftarrow",
+    "codepoint": "U+021D0",
+    "description": "Is implied by",
+    "aliases": ["<="],
+    "notes": ""
+  },
+  {
+    "category": "Arrows",
+    "command": "\\Rightarrow",
+    "codepoint": "U+021D2",
+    "description": "Implies",
+    "aliases": ["=>"],
+    "notes": ""
+  },
+  {
+    "category": "Arrows",
+    "command": "\\Leftrightarrow",
+    "codepoint": "U+021D4",
+    "description": "Left and right double arrow",
+    "aliases": ["<=>"],
+    "notes": ""
+  },
+  {
+    "category": "Arrows",
+    "command": "\\mapsto",
+    "codepoint": "U+021A6",
+    "description": "Maps to, rightward",
+    "notes": ""
+  },
+  {
+    "category": "Arrows",
+    "command": "\\nearrow",
+    "codepoint": "U+02197",
+    "description": "NE pointing arrow",
+    "notes": ""
+  },
+  {
+    "category": "Arrows",
+    "command": "\\searrow",
+    "codepoint": "U+02198",
+    "description": "SE pointing arrow",
+    "notes": ""
+  },
+  {
+    "category": "Arrows",
+    "command": "\\rightleftharpoons",
+    "codepoint": "U+021CC",
+    "description": "Right harpoon over left",
+    "notes": ""
+  },
+  {
+    "category": "Arrows",
+    "command": "\\leftharpoonup",
+    "codepoint": "U+021BC",
+    "description": "Left harpoon up",
+    "notes": ""
+  },
+  {
+    "category": "Arrows",
+    "command": "\\rightharpoonup",
+    "codepoint": "U+021C0",
+    "description": "Right harpoon up",
+    "notes": ""
+  },
+  {
+    "category": "Arrows",
+    "command": "\\leftharpoondown",
+    "codepoint": "U+021BD",
+    "description": "Left harpoon down",
+    "notes": ""
+  },
+  {
+    "category": "Arrows",
+    "command": "\\rightharpoondown",
+    "codepoint": "U+021C1",
+    "description": "Right harpoon down",
+    "notes": ""
+  },
+  {
+    "category": "Misc",
+    "command": "\\infty",
+    "codepoint": "U+0221E",
+    "description": "Infinity",
+    "notes": ""
+  },
+  {
+    "category": "Misc",
+    "command": "\\partial",
+    "codepoint": "U+1D715",
+    "description": "Partial differential",
+    "notes": ""
+  },
+  {
+    "category": "Misc",
+    "command": "\\nabla",
+    "codepoint": "U+02207",
+    "description": "Nabla, del, hamilton operator",
+    "notes": ""
+  },
+  {
+    "category": "Misc",
+    "command": "\\varnothing",
+    "codepoint": "U+02300",
+    "description": "Empty set",
+    "notes": "Requires \\usepackage{amssymb}."
+  },
+  {
+    "category": "Misc",
+    "command": "\\forall",
+    "codepoint": "U+02200",
+    "description": "For all",
+    "notes": ""
+  },
+  {
+    "category": "Misc",
+    "command": "\\exists",
+    "codepoint": "U+02203",
+    "description": "There exists",
+    "notes": ""
+  },
+  {
+    "category": "Misc",
+    "command": "\\neg",
+    "codepoint": "U+000AC",
+    "description": "Not sign",
+    "notes": ""
+  },
+  {
+    "category": "Misc",
+    "command": "\\Re",
+    "codepoint": "U+0211C",
+    "description": "Real part",
+    "notes": ""
+  },
+  {
+    "category": "Misc",
+    "command": "\\Im",
+    "codepoint": "U+02111",
+    "description": "Imaginary part",
+    "notes": ""
+  },
+  {
+    "category": "Misc",
+    "command": "\\Box",
+    "codepoint": "U+025A1",
+    "description": "Square",
+    "notes": "Requires \\usepackage{amssymb}."
+  },
+  {
+    "category": "Misc",
+    "command": "\\triangle",
+    "codepoint": "U+025B3",
+    "description": "Triangle",
+    "notes": ""
+  },
+  {
+    "category": "Misc",
+    "command": "\\aleph",
+    "codepoint": "U+02135",
+    "description": "Hebrew letter aleph",
+    "notes": ""
+  },
+  {
+    "category": "Misc",
+    "command": "\\wp",
+    "codepoint": "U+02118",
+    "description": "Weierstrass letter p",
+    "notes": ""
+  },
+  {
+    "category": "Misc",
+    "command": "\\#",
+    "codepoint": "U+00023",
+    "description": "Number sign, hashtag",
+    "notes": ""
+  },
+  {
+    "category": "Misc",
+    "command": "\\$",
+    "codepoint": "U+00024",
+    "description": "Dollar sign",
+    "notes": ""
+  },
+  {
+    "category": "Misc",
+    "command": "\\%",
+    "codepoint": "U+00025",
+    "description": "Percent sign",
+    "notes": ""
+  },
+  {
+    "category": "Misc",
+    "command": "\\&",
+    "codepoint": "U+00026",
+    "description": "Et sign, and, ampersand",
+    "notes": ""
+  },
+  {
+    "category": "Misc",
+    "command": "\\{",
+    "codepoint": "U+0007B",
+    "description": "Left curly brace",
+    "notes": ""
+  },
+  {
+    "category": "Misc",
+    "command": "\\}",
+    "codepoint": "U+0007D",
+    "description": "Right curly brace",
+    "notes": ""
+  },
+  {
+    "category": "Misc",
+    "command": "\\langle",
+    "codepoint": "U+027E8",
+    "description": "Left angle bracket, bra",
+    "notes": ""
+  },
+  {
+    "category": "Misc",
+    "command": "\\rangle",
+    "codepoint": "U+027E9",
+    "description": "Right angle bracket, ket",
+    "notes": ""
+  }
+]

services/web/frontend/js/features/symbol-palette/utils/categories.js

@@ -0,0 +1,44 @@
+import symbols from '../data/symbols.json'
+export function createCategories(t) {
+  return [
+    {
+      id: 'Greek',
+      label: t('category_greek'),
+    },
+    {
+      id: 'Arrows',
+      label: t('category_arrows'),
+    },
+    {
+      id: 'Operators',
+      label: t('category_operators'),
+    },
+    {
+      id: 'Relations',
+      label: t('category_relations'),
+    },
+    {
+      id: 'Misc',
+      label: t('category_misc'),
+    },
+  ]
+}
+
+export function buildCategorisedSymbols(categories) {
+  const output = {}
+
+  for (const category of categories) {
+    output[category.id] = []
+  }
+
+  for (const item of symbols) {
+    if (item.category in output) {
+      item.character = String.fromCodePoint(
+        parseInt(item.codepoint.replace(/^U\+0*/, ''), 16)
+      )
+      output[item.category].push(item)
+    }
+  }
+
+  return output
+}

services/web/frontend/js/features/template-gallery/components/gallery-header-all.tsx

@@ -0,0 +1,29 @@
+import { useTranslation } from 'react-i18next'
+import OLCol from '@/features/ui/components/ol/ol-col'
+import OLRow from '@/features/ui/components/ol/ol-row'
+
+export default function GalleryHeaderAll() {
+  const { t } = useTranslation()
+  return (
+    <div className="gallery-header">
+      <OLRow>
+        <OLCol md={12}>
+          <h1 className="gallery-title">
+            <span className="eyebrow-text">
+              <span aria-hidden="true">&#123;</span>
+              <span>{t('overleaf_template_gallery')}</span>
+              <span aria-hidden="true">&#125;</span>
+            </span>
+            {t('latex_templates')}
+          </h1>
+        </OLCol>
+      </OLRow>
+      <div className="row">
+        <div className="col-md-12">
+          <p className="gallery-summary">{t('latex_templates_for_journal_articles')}
+          </p>
+        </div>
+      </div>
+    </div>
+  )
+}

services/web/frontend/js/features/template-gallery/components/gallery-header-tagged.tsx

@@ -0,0 +1,33 @@
+import getMeta from '@/utils/meta'
+import OLCol from '@/features/ui/components/ol/ol-col'
+import OLRow from '@/features/ui/components/ol/ol-row'
+import GallerySearchSortHeader from './gallery-search-sort-header'
+
+export default function GalleryHeaderTagged({ category }) {
+  const title = getMeta('og:title')
+  const { templateLinks } = getMeta('ol-ExposedSettings') || []
+
+  const description = templateLinks?.find(link => link.url.split("/").pop() === category)?.description
+  const gotoAllLink = (category !== 'all')
+  return (
+    <div className="tagged-header-container">
+      <GallerySearchSortHeader
+        gotoAllLink={gotoAllLink}
+      />
+      { category && (
+        <>
+          <OLRow>
+            <OLCol xs={12}>
+              <h1 className="gallery-title">{title}</h1>
+            </OLCol>
+          </OLRow>
+          <OLRow>
+            <OLCol lg={8}>
+              <p className="gallery-summary">{description}</p>
+            </OLCol>
+          </OLRow>
+        </>
+      )}
+    </div>
+  )
+}

services/web/frontend/js/features/template-gallery/components/gallery-popular-tags.tsx

@@ -0,0 +1,31 @@
+import { useTranslation } from 'react-i18next'
+import getMeta from '@/utils/meta'
+
+export default function GalleryPopularTags() {
+  const { t } = useTranslation()
+  const { templateLinks } = getMeta('ol-ExposedSettings') || []
+
+  if(!templateLinks || templateLinks.length < 2) return null
+
+  return (
+    <div className="popular-tags">
+      <h1>{t('categories')}</h1>
+      <div className="row popular-tags-list">
+        {templateLinks?.filter(link => link.url.split("/").pop() !== "all").map((link, index) => (
+          <div key={index} className="gallery-thumbnail col-12 col-md-6 col-lg-4">
+            <a href={link.url}>
+              <div className="thumbnail-tag">
+                <img
+                  src={`/img/website-redesign/gallery/${link.url.split("/").pop()}.svg`}
+                  alt={link.name}
+                />
+              </div>
+              <span className="caption-title">{link.name}</span>
+            </a>
+            <p>{link.description}</p>
+          </div>
+        ))}
+      </div>
+    </div>
+  )
+}

services/web/frontend/js/features/template-gallery/components/gallery-search-sort-header.tsx

@@ -0,0 +1,78 @@
+import { useTemplateGalleryContext } from '../context/template-gallery-context'
+import { useTranslation } from 'react-i18next'
+import SearchForm from './search-form'
+import OLCol from '@/features/ui/components/ol/ol-col'
+import OLRow from '@/features/ui/components/ol/ol-row'
+import useSort from '../hooks/use-sort'
+import withContent, { SortBtnProps } from './sort/with-content'
+import MaterialIcon from '@/shared/components/material-icon'
+
+function SortBtn({ onClick, text, iconType, screenReaderText }: SortBtnProps) {
+  return (
+    <button
+      className="gallery-header-sort-btn inline-block"
+      onClick={onClick}
+      aria-label={screenReaderText}
+    >
+      <span>{text}</span>
+        {iconType ? (
+          <MaterialIcon type={iconType} />
+        ) : (
+          <MaterialIcon type="arrow_upward" style={{ visibility: 'hidden' }} />
+        )}
+    </button>
+  )
+}
+
+const SortByButton = withContent(SortBtn)
+
+export default function GallerySearchSortHeader( { gotoAllLink }: { boolean } ) {
+  const { t } = useTranslation()
+  const {
+    searchText,
+    setSearchText,
+    sort,
+  } = useTemplateGalleryContext()
+
+  const { handleSort } = useSort()
+  return (
+    <OLRow className="align-items-center">
+      {gotoAllLink ? (
+      <OLCol className="col-auto">
+          <a className="previous-page-link" href="/templates/all">
+            <i className="material-symbols material-symbols-rounded" aria-hidden="true">arrow_left_alt</i>
+            {t('all_templates')}
+          </a>
+        </OLCol>
+      ) : (
+      <OLCol className="col-auto">
+          <a className="previous-page-link" href="/templates">
+            <i className="material-symbols material-symbols-rounded" aria-hidden="true">arrow_left_alt</i>
+            {t('template_gallery')}
+          </a>
+        </OLCol>
+      )}
+      <OLCol className="d-flex justify-content-center gap-2">
+        <SortByButton
+          column="lastUpdated"
+          text={t('last_updated')}
+          sort={sort}
+          onClick={() => handleSort('lastUpdated')}
+        />
+
+        <SortByButton
+          column="name"
+          text={t('title')}
+          sort={sort}
+          onClick={() => handleSort('name')}
+        />
+      </OLCol>
+      <OLCol xs={3} className="ms-auto" >
+        <SearchForm
+          inputValue={searchText}
+          setInputValue={setSearchText}
+        />
+      </OLCol>
+    </OLRow>
+  )
+}

services/web/frontend/js/features/template-gallery/components/pagination.tsx

@@ -0,0 +1,80 @@
+import { useTranslation } from 'react-i18next'
+
+export default function Pagination({ currentPage, totalPages, onPageChange }) {
+  const { t } = useTranslation()
+  if (totalPages <= 1) return null
+
+  const pageNumbers = []
+  let startPage = Math.max(1, currentPage - 4)
+  let endPage = Math.min(totalPages, currentPage + 4)
+
+  if (startPage > 1) {
+    pageNumbers.push(1)
+    if (startPage > 2) {
+      pageNumbers.push("...")
+    }
+  }
+
+  for (let i = startPage; i <= endPage; i++) {
+    pageNumbers.push(i)
+  }
+
+  if (endPage < totalPages) {
+    if (endPage < totalPages - 1) {
+      pageNumbers.push("...")
+    }
+    pageNumbers.push(totalPages)
+  }
+
+  return (
+    <nav role="navigation" aria-label={t('pagination_navigation')}>
+      <ul className="pagination">
+{/*
+        {currentPage > 1 && (
+          <li>
+            <button aria-label={t('go_to_first_page')} onClick={() => onPageChange(1)}>
+              &lt;&lt; {t('first')}
+            </button>
+          </li>
+        )}
+*/}
+        {currentPage > 1 && (
+          <li>
+            <button aria-label={t('go_prev_page')} onClick={() => onPageChange(currentPage - 1)}>
+              &lt; {t('prev')}
+            </button>
+          </li>
+        )}
+        {pageNumbers.map((page, index) => (
+          <li key={index} className={page === currentPage ? "active" : ""}>
+            {page === "..." ? (
+              <span aria-hidden="true">{page}</span>
+            ) : page === currentPage ? (
+              <span aria-label={t('page_current', { page })} aria-current="true">{page}</span>
+            ) : (
+              <button aria-label={t('go_page', { page })} onClick={() => onPageChange(page)}>
+                {page}
+              </button>
+            )}
+          </li>
+        ))}
+        {currentPage < totalPages && (
+          <li>
+            <button aria-label={t('go_next_page')} onClick={() => onPageChange(currentPage + 1)}>
+              {t('next')} &gt;
+            </button>
+          </li>
+        )}
+{/*
+        {currentPage < totalPages && (
+          <li>
+            <button aria-label={t('go_to_last_page')} onClick={() => onPageChange(totalPages)}>
+              {t('last')} &gt;&gt;
+            </button>
+          </li>
+        )}
+*/}
+      </ul>
+    </nav>
+  )
+}

services/web/frontend/js/features/template-gallery/components/search-form.tsx

@@ -0,0 +1,61 @@
+import { useTranslation } from 'react-i18next'
+import { MergeAndOverride } from '../../../../../types/utils'
+import OLForm from '@/features/ui/components/ol/ol-form'
+import OLFormControl from '@/features/ui/components/ol/ol-form-control'
+import MaterialIcon from '@/shared/components/material-icon'
+
+type SearchFormOwnProps = {
+  inputValue: string
+  setInputValue: (input: string) => void
+}
+
+type SearchFormProps = MergeAndOverride<
+  React.ComponentProps<typeof OLForm>,
+  SearchFormOwnProps
+>
+
+export default function SearchForm({
+  inputValue,
+  setInputValue,
+}: SearchFormProps) {
+  const { t } = useTranslation()
+  let placeholderMessage = t('search')
+  const placeholder = `${placeholderMessage}…`
+
+  const handleChange: React.ComponentProps<typeof OLFormControl
+  >['onChange'] = e => {
+    setInputValue(e.target.value)
+  }
+
+  const handleClear = () => setInputValue('')
+
+  return (
+    <OLForm
+      role="search"
+      onSubmit={e => e.preventDefault()}
+    >
+      <OLFormControl
+        className="gallery-search-form-control"
+        id="gallery-search-form-control"
+        type="text"
+        value={inputValue}
+        onChange={handleChange}
+        placeholder={placeholder}
+        aria-label={placeholder}
+        prepend={<MaterialIcon type="search" />}
+        append={
+          inputValue.length > 0 && (
+            <button
+              type="button"
+              className="form-control-search-clear-btn"
+              aria-label={t('clear_search')}
+              onClick={handleClear}
+            >
+              <MaterialIcon type="clear" />
+            </button>
+          )
+        }
+      />
+    </OLForm>
+  )
+}

services/web/frontend/js/features/template-gallery/components/sort/with-content.tsx

@@ -0,0 +1,46 @@
+import { useTranslation } from 'react-i18next'
+import { Sort } from '../../types/api'
+
+type SortBtnOwnProps = {
+  column: string
+  sort: Sort
+  text: string
+  onClick: () => void
+}
+
+type WithContentProps = {
+  iconType?: string
+  screenReaderText: string
+}
+
+export type SortBtnProps = SortBtnOwnProps & WithContentProps
+
+function withContent<T extends SortBtnOwnProps>(
+  WrappedComponent: React.ComponentType<T & WithContentProps>
+) {
+  function WithContent(hocProps: T) {
+    const { t } = useTranslation()
+    const { column, text, sort } = hocProps
+    let iconType
+
+    let screenReaderText = t('sort_by_x', { x: text })
+
+    if (column === sort.by) {
+      iconType =
+        sort.order === 'asc' ? 'arrow_upward_alt' : 'arrow_downward_alt'
+      screenReaderText = t('reverse_x_sort_order', { x: text })
+    }
+
+    return (
+      <WrappedComponent
+        {...hocProps}
+        iconType={iconType}
+        screenReaderText={screenReaderText}
+      />
+    )
+  }
+
+  return WithContent
+}
+
+export default withContent

services/web/frontend/js/features/template-gallery/components/template-gallery-entry.tsx

@@ -0,0 +1,29 @@
+import { memo } from 'react'
+import { cleanHtml } from '../../../../../modules/template-gallery/app/src/CleanHtml.mjs'
+
+function TemplateGalleryEntry({ template }) {
+  return (
+    <div className={"gallery-thumbnail col-12 col-md-6 col-lg-4"}>
+      <a href={`/template/${template.id}`} className="thumbnail-link">
+        <div className="thumbnail">
+          <img
+            src={`/template/${template.id}/preview?version=${template.version}&style=thumbnail`}
+            alt={template.name}
+          />
+        </div>
+        <span className="gallery-list-item-title">
+          <span className="caption-title">{template.name}</span>
+          <span className="badge-container"></span>
+        </span>
+      </a>
+      <div className="caption">
+        <p className="caption-description" dangerouslySetInnerHTML={{ __html: cleanHtml(template.description, 'plainText') }} />
+      </div>
+      <div className="author-name">
+        <div dangerouslySetInnerHTML={{ __html: cleanHtml(template.author, 'plainText') }} />
+      </div>
+    </div>
+  )
+}
+
+export default memo(TemplateGalleryEntry)

services/web/frontend/js/features/template-gallery/components/template-gallery-root.tsx

@@ -0,0 +1,64 @@
+import { TemplateGalleryProvider } from '../context/template-gallery-context'
+import { useTranslation } from 'react-i18next'
+import useWaitForI18n from '../../../shared/hooks/use-wait-for-i18n'
+import withErrorBoundary from '../../../infrastructure/error-boundary'
+import { GenericErrorBoundaryFallback } from '@/shared/components/generic-error-boundary-fallback'
+import getMeta from '@/utils/meta'
+import DefaultNavbar from '@/features/ui/components/bootstrap-5/navbar/default-navbar'
+import Footer from '@/features/ui/components/bootstrap-5/footer/footer'
+import GalleryHeaderTagged from './gallery-header-tagged'
+import GalleryHeaderAll from './gallery-header-all'
+import TemplateGallery from './template-gallery'
+import GallerySearchSortHeader from './gallery-search-sort-header'
+import GalleryPopularTags from './gallery-popular-tags'
+
+function TemplateGalleryRoot() {
+  const { isReady } = useWaitForI18n()
+  if (!isReady) {
+    return null
+  }
+  return (
+    <TemplateGalleryProvider>
+      <TemplateGalleryPageContent />
+    </TemplateGalleryProvider>
+  )
+}
+
+function TemplateGalleryPageContent() {
+  const { t } = useTranslation()
+  const navbarProps = getMeta('ol-navbar')
+  const footerProps = getMeta('ol-footer')
+  const category = getMeta('ol-templateCategory')
+
+  return (
+    <>
+      <DefaultNavbar {...navbarProps} />
+      <main id="main-content"
+        className={`content content-page gallery ${category ? 'gallery-tagged' : ''}`}
+      >
+        <div className="container">
+          {category ? (
+            <>
+              <GalleryHeaderTagged category={category} />
+              <TemplateGallery />
+            </>
+          ) : (
+            <>
+              <GalleryHeaderAll />
+              <GalleryPopularTags />
+              <hr className="w-full border-muted mb-5" />
+              <div className="recent-docs">
+                <GallerySearchSortHeader />
+                <h2>{t('all_templates')}</h2>
+                <TemplateGallery />
+              </div>
+            </>
+          )}
+        </div>
+      </main>
+      <Footer {...footerProps} />
+    </>
+  )
+}
+
+export default withErrorBoundary(TemplateGalleryRoot, GenericErrorBoundaryFallback)

services/web/frontend/js/features/template-gallery/components/template-gallery.tsx

@@ -0,0 +1,65 @@
+import { useEffect, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import OLRow from '@/features/ui/components/ol/ol-row'
+import { useTemplateGalleryContext } from '../context/template-gallery-context'
+import TemplateGalleryEntry from './template-gallery-entry'
+import Pagination from './pagination'
+
+export default function TemplateGallery() {
+  const { t } = useTranslation()
+  const {
+    searchText,
+    sort,
+    visibleTemplates,
+  } = useTemplateGalleryContext()
+
+  const templatesPerPage = 6
+  const totalPages = Math.ceil(visibleTemplates.length / templatesPerPage)
+
+  const [currentPage, setCurrentPage] = useState(1)
+
+  useEffect(() => {
+    setCurrentPage(1)
+  }, [sort])
+
+  const [lastNonSearchPage, setLastNonSearchPage] = useState(1)
+  const [isSearching, setIsSearching] = useState(false)
+  useEffect(() => {
+    if (searchText.length > 0) {
+      if (!isSearching) {
+        setLastNonSearchPage(currentPage)
+        setIsSearching(true)
+      }
+      setCurrentPage(1)
+    } else {
+      if (isSearching) {
+        setCurrentPage(lastNonSearchPage)
+        setIsSearching(false)
+      }
+    }
+  }, [searchText])
+
+  const startIndex = (currentPage - 1) * templatesPerPage
+  const currentTemplates = visibleTemplates.slice(startIndex, startIndex + templatesPerPage)
+
+  return (
+    <>
+      <OLRow className="gallery-container">
+        {currentTemplates.length > 0 ? (
+          currentTemplates.map(p => (
+            <TemplateGalleryEntry
+              className="gallery-thumbnail col-12 col-md-6 col-lg-4"
+              key={p.id}
+              template={p}
+            />
+          ))
+        ) : (
+          <OLRow>
+            <p className="text-center">{t('no_templates_found')}</p>
+          </OLRow>
+        )}
+      </OLRow>
+      <Pagination currentPage={currentPage} totalPages={totalPages} onPageChange={setCurrentPage} />
+    </>
+  )
+}

services/web/frontend/js/features/template-gallery/context/template-gallery-context.tsx

@@ -0,0 +1,129 @@
+import {
+  createContext,
+  ReactNode,
+  useContext,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react'
+import { Template } from '../../../../../types/template'
+import { GetTemplatesResponseBody, Sort } from '../types/api'
+import getMeta from '../../../utils/meta'
+import useAsync from '../../../shared/hooks/use-async'
+import { getTemplates } from '../util/api'
+import sortTemplates from '../util/sort-templates'
+import { debugConsole } from '@/utils/debugging'
+
+export type TemplateGalleryContextValue = {
+  visibleTemplates: Template[]
+  totalTemplatesCount: number
+  error: Error | null
+  sort: Sort
+  setSort: React.Dispatch<React.SetStateAction<Sort>>
+  searchText: string
+  setSearchText: React.Dispatch<React.SetStateAction<string>>
+}
+
+export const TemplateGalleryContext = createContext<
+  TemplateGalleryContextValue | undefined
+>(undefined)
+
+type TemplateGalleryProviderProps = {
+  children: ReactNode
+}
+
+export function TemplateGalleryProvider({ children }: TemplateGalleryProviderProps) {
+  const [loadedTemplates, setLoadedTemplates] = useState<Template[]>([])
+  const [visibleTemplates, setVisibleTemplates] = useState<Template[]>([])
+  const [totalTemplatesCount, setTotalTemplatesCount] = useState<number>(0)
+  const [sort, setSort] = useState<Sort>({
+    by: 'lastUpdated',
+    order: 'desc',
+  })
+  const prevSortRef = useRef<Sort>(sort)
+
+  const [searchText, setSearchText] = useState('')
+
+  const {
+    error,
+    runAsync,
+  } = useAsync<GetTemplatesResponseBody>()
+
+  const category = getMeta('ol-templateCategory') || 'all'
+
+  useEffect(() => {
+    runAsync(getTemplates(sort, category))
+      .then(data => {
+        setLoadedTemplates(data.templates)
+        setTotalTemplatesCount(data.totalSize)
+      })
+      .catch(debugConsole.error)
+      .finally(() => {
+      })
+  }, [runAsync])
+
+  useEffect(() => {
+    let filteredTemplates = [...loadedTemplates]
+
+    if (searchText.length) {
+      filteredTemplates = filteredTemplates.filter(template =>
+        template.name.toLowerCase().includes(searchText.toLowerCase()) ||
+        template.description.toLowerCase().includes(searchText.toLowerCase())
+      )
+    }
+
+    if (prevSortRef.current !== sort) {
+      filteredTemplates = sortTemplates(filteredTemplates, sort)
+      const loadedTemplatesSorted = sortTemplates(loadedTemplates, sort)
+      setLoadedTemplates(loadedTemplatesSorted)
+    }
+      setVisibleTemplates(filteredTemplates)
+  }, [
+    loadedTemplates,
+    searchText,
+    sort,
+  ])
+
+  useEffect(() => {
+    prevSortRef.current = sort
+  }, [sort])
+
+
+  const value = useMemo<TemplateGalleryContextValue>(
+    () => ({
+      error,
+      searchText,
+      setSearchText,
+      setSort,
+      sort,
+      totalTemplatesCount,
+      visibleTemplates,
+    }),
+    [
+      error,
+      searchText,
+      setSearchText,
+      setSort,
+      sort,
+      totalTemplatesCount,
+      visibleTemplates,
+    ]
+  )
+
+  return (
+    <TemplateGalleryContext.Provider value={value}>
+      {children}
+    </TemplateGalleryContext.Provider>
+  )
+}
+
+export function useTemplateGalleryContext() {
+  const context = useContext(TemplateGalleryContext)
+  if (!context) {
+    throw new Error(
+      'TemplateGalleryContext is only available inside TemplateGalleryProvider'
+    )
+  }
+  return context
+}

services/web/frontend/js/features/template-gallery/hooks/use-sort.ts

@@ -0,0 +1,20 @@
+import { useTemplateGalleryContext } from '../context/template-gallery-context'
+import { Sort } from '../types/api'
+import { SortingOrder } from '../../../../../types/sorting-order'
+
+const toggleSort = (order: SortingOrder): SortingOrder => {
+  return order === 'asc' ? 'desc' : 'asc'
+}
+
+function useSort() {
+  const { sort, setSort } = useTemplateGalleryContext()
+  const handleSort = (by: Sort['by']) => {
+    setSort(prev => ({
+      by,
+      order: prev.by === by ? toggleSort(sort.order) : by === 'lastUpdated' ? 'desc' : 'asc',
+    }))
+  }
+  return { handleSort }
+}
+
+export default useSort

services/web/frontend/js/features/template-gallery/types/api.ts

@@ -0,0 +1,12 @@
+import { SortingOrder } from '../../../../../types/sorting-order'
+import { Template } from '../../../../../types/template'
+
+export type Sort = {
+  by: 'lastUpdated' | 'name'
+  order: SortingOrder
+}
+
+export type GetTemplatesResponseBody = {
+  totalSize: number
+  templates: Template[]
+}

services/web/frontend/js/features/template-gallery/util/api.ts

@@ -0,0 +1,12 @@
+import { GetTemplatesResponseBody, Sort } from '../types/api'
+import { getJSON } from '../../../infrastructure/fetch-json'
+
+export function getTemplates(sortBy: Sort, category: string): Promise<GetTemplatesResponseBody> {
+  const queryParams = new URLSearchParams({
+    by: sortBy.by,
+    order: sortBy.order,
+    category,
+  }).toString()
+
+  return getJSON(`/api/templates?${queryParams}`)
+}

services/web/frontend/js/features/template-gallery/util/sort-templates.ts

@@ -0,0 +1,40 @@
+import { Sort } from '../types/api'
+import { Template } from '../../../../../types/template'
+import { SortingOrder } from '../../../../../types/sorting-order'
+import { Compare } from '../../../../../types/helpers/array/sort'
+
+const order = (order: SortingOrder, templates: Template[]) => {
+  return order === 'asc' ? [...templates] : templates.reverse()
+}
+
+export const defaultComparator = (
+  v1: Template,
+  v2: Template,
+  key: 'name' | 'lastUpdated'
+) => {
+  const value1 = v1[key].toLowerCase()
+  const value2 = v2[key].toLowerCase()
+
+  if (value1 !== value2) {
+    return value1 < value2 ? Compare.SORT_A_BEFORE_B : Compare.SORT_A_AFTER_B
+  }
+
+  return Compare.SORT_KEEP_ORDER
+}
+
+export default function sortTemplates(templates: Template[], sort: Sort) {
+  let sorted = [...templates]
+  if (sort.by === 'name') {
+    sorted = sorted.sort((...args) => {
+      return defaultComparator(...args, 'name')
+    })
+  }
+
+  if (sort.by === 'lastUpdated') {
+    sorted = sorted.sort((...args) => {
+      return defaultComparator(...args, 'lastUpdated')
+    })
+  }
+
+  return order(sort.order, sorted)
+}

services/web/frontend/js/features/template/components/delete-template-button.tsx

@@ -0,0 +1,48 @@
+import { useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import useIsMounted from '@/shared/hooks/use-is-mounted'
+import OLButton from '@/features/ui/components/ol/ol-button'
+import DeleteTemplateModal from './modals/delete-template-modal'
+import { useTemplateContext } from '../context/template-context'
+import { deleteTemplate } from '../util/api'
+import type { Template } from '../../../../../types/template'
+
+function DeleteTemplateButton() {
+  const { t } = useTranslation()
+  const [showModal, setShowModal] = useState(false)
+  const isMounted = useIsMounted()
+  const { template, setTemplate } = useTemplateContext()
+
+  const handleOpenModal = () => {
+    setShowModal(true)
+  }
+
+  const handleCloseModal = () => {
+    if (isMounted.current) {
+      setShowModal(false)
+    }
+  }
+
+  const handleDeleteTemplate = async (template: Template) => {
+    await deleteTemplate(template)
+    handleCloseModal()
+    const previousPage = document.referrer || '/templates'
+    window.location.href = previousPage
+  }
+
+  return (
+    <>
+      <OLButton variant="danger" onClick={handleOpenModal}>
+        {t('delete')}
+      </OLButton>
+      <DeleteTemplateModal
+        template={template}
+        actionHandler={handleDeleteTemplate}
+        showModal={showModal}
+        handleCloseModal={handleCloseModal}
+      />
+    </>
+  )
+}
+
+export default DeleteTemplateButton

services/web/frontend/js/features/template/components/edit-template-button.tsx

@@ -0,0 +1,46 @@
+import { useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import useIsMounted from '@/shared/hooks/use-is-mounted'
+import OLButton from '@/features/ui/components/ol/ol-button'
+import EditTemplateModal from './modals/edit-template-modal'
+import { useTemplateContext } from '../context/template-context'
+import { updateTemplate } from '../util/api'
+import type { Template } from '../../../../../types/template'
+
+export default function EditTemplateButton() {
+  const { t } = useTranslation()
+  const [showModal, setShowModal] = useState(false)
+  const isMounted = useIsMounted()
+  const { template, setTemplate } = useTemplateContext()
+
+  const handleOpenModal = () => {
+    setShowModal(true)
+  }
+
+  const handleCloseModal = () => {
+    if (isMounted.current) {
+      setShowModal(false)
+    }
+  }
+
+  const handleEditTemplate = async (editedTemplate: Template) => {
+    const updated = await updateTemplate({ editedTemplate, template })
+    if (updated) {
+      setTemplate(prev => ({ ...prev, ...updated }))
+    }
+  }
+
+  return (
+    <>
+      <OLButton variant="secondary" onClick={handleOpenModal}>
+        {t('edit')}
+      </OLButton>
+
+      <EditTemplateModal
+        showModal={showModal}
+        handleCloseModal={handleCloseModal}
+        actionHandler={handleEditTemplate}
+      />
+    </>
+  )
+}

services/web/frontend/js/features/template/components/form/form-field-input.tsx

@@ -0,0 +1,17 @@
+import React from 'react'
+import OLFormControl from '@/features/ui/components/ol/ol-form-control'
+
+interface FormFieldInputProps extends React.ComponentProps<typeof OLFormControl> {
+  value: string
+  placeholder?: string
+  onChange: React.ChangeEventHandler<HTMLInputElement | HTMLTextAreaElement>
+}
+
+const FormFieldInput: React.FC<FormFieldInputProps> = ({
+  type = 'text',
+  ...props
+}) => (
+  <OLFormControl type={type} {...props} />
+)
+
+export default FormFieldInput

services/web/frontend/js/features/template/components/form/labeled-row-form-group.tsx

@@ -0,0 +1,26 @@
+import React from 'react'
+import OLFormGroup from '@/features/ui/components/ol/ol-form-group'
+import OLFormLabel from '@/features/ui/components/ol/ol-form-label'
+
+interface LabeledRowFormGroupProps {
+  controlId: string
+  label: string
+  children: React.ReactNode
+}
+
+const LabeledRowFormGroup: React.FC<LabeledRowFormGroupProps> = ({
+  controlId,
+  label,
+  children,
+}) => (
+  <OLFormGroup controlId={controlId} className="row">
+    <div className="col-2">
+      <OLFormLabel className="col-form-label col">{label}</OLFormLabel>
+    </div>
+    <div className="col-10">
+      {children}
+    </div>
+  </OLFormGroup>
+)
+
+export default React.memo(LabeledRowFormGroup)

services/web/frontend/js/features/template/components/form/template-form-fields.tsx

@@ -0,0 +1,96 @@
+import React, { useCallback } from 'react'
+import LabeledRowFormGroup from '../form/labeled-row-form-group'
+import FormFieldInput from '../form/form-field-input'
+import SettingsTemplateCategory from '../settings/settings-template-category'
+import SettingsLicense from '../settings/settings-license'
+import SettingsLanguage from '../settings/settings-language'
+import { useTranslation } from 'react-i18next'
+import type { Template } from '../../../../../../types/template'
+
+interface TemplateFormFieldsProps {
+  template: Partial<Template>
+  includeLanguage?: boolean
+  onChange: (changes: Partial<Template>) => void
+  onEnterKey?: () => void
+}
+
+function TemplateFormFields({
+  template,
+  includeLanguage = false,
+  onChange,
+  onEnterKey,
+}: TemplateFormFieldsProps) {
+  const { t } = useTranslation()
+
+  const handleKeyDown = useCallback(
+    (e: React.KeyboardEvent<HTMLInputElement>) => {
+      if (e.key === 'Enter') {
+        e.preventDefault()
+        onEnterKey?.()
+      }
+    },
+    [onEnterKey]
+  )
+
+  return (
+    <>
+      <LabeledRowFormGroup controlId="form-title" label={t('title') + ':'}>
+        <FormFieldInput
+          required
+          maxLength="255"
+          value={template.name ?? ''}
+          placeholder={t('title')}
+          onChange={e => onChange({ name: e.target.value })}
+          onKeyDown={handleKeyDown}
+        />
+      </LabeledRowFormGroup>
+
+      <LabeledRowFormGroup controlId="form-author" label={t('author') + ':'}>
+        <FormFieldInput
+          maxLength="255"
+          value={template.authorMD ?? ''}
+          placeholder={t('author')}
+          onChange={e => onChange({ authorMD: e.target.value })}
+          onKeyDown={handleKeyDown}
+        />
+      </LabeledRowFormGroup>
+
+      <LabeledRowFormGroup controlId="form-category" label={t('category') + ':'}>
+        <SettingsTemplateCategory
+          value={template.category}
+          onChange={val => onChange({ category: val })}
+        />
+      </LabeledRowFormGroup>
+
+      <LabeledRowFormGroup controlId="form-description" label={t('description') + ':'}>
+        <FormFieldInput
+          as="textarea"
+          rows={8}
+          maxLength="5000"
+          value={template.descriptionMD ?? ''}
+          placeholder={t('description')}
+          onChange={e => onChange({ descriptionMD: e.target.value })}
+          autoFocus
+        />
+      </LabeledRowFormGroup>
+
+      <LabeledRowFormGroup controlId="form-license" label={t('license') + ':'}>
+        <SettingsLicense
+          value={template.license}
+          onChange={val => onChange({ license: val })}
+        />
+      </LabeledRowFormGroup>
+
+      {includeLanguage && (
+        <LabeledRowFormGroup controlId="form-language" label={t('language') + ':'}>
+          <SettingsLanguage
+            value={template.language}
+            onChange={val => onChange({ language: val })}
+          />
+        </LabeledRowFormGroup>
+      )}
+    </>
+  )
+}
+
+export default React.memo(TemplateFormFields)

services/web/frontend/js/features/template/components/manage-template-modal/editor-manage-template-modal-wrapper.tsx

@@ -0,0 +1,40 @@
+import React from 'react'
+import withErrorBoundary from '@/infrastructure/error-boundary'
+import { useProjectContext } from '@/shared/context/project-context'
+import ManageTemplateModal from './manage-template-modal'
+import type { Template } from '../../../../../../types/template'
+
+interface EditorManageTemplateModalWrapperProps {
+  show: boolean
+  handleHide: () => void
+  openTemplate: (data: Template) => void
+}
+
+const EditorManageTemplateModalWrapper = React.memo(
+  function EditorManageTemplateModalWrapper({ 
+    show,
+    handleHide,
+    openTemplate,
+  }: EditorManageTemplateModalWrapperProps) {
+    const {
+      _id: projectId,
+      name: projectName,
+    } = useProjectContext()
+
+    if (!projectName) {
+      // wait for useProjectContext
+      return null
+    }
+    return (
+      <ManageTemplateModal
+        handleHide={handleHide}
+        show={show}
+        handleAfterPublished={openTemplate}
+        projectId={projectId}
+        projectName={projectName}
+      />
+    )
+  }
+)
+
+export default withErrorBoundary(EditorManageTemplateModalWrapper)

services/web/frontend/js/features/template/components/manage-template-modal/manage-template-modal-content.tsx

@@ -0,0 +1,169 @@
+import React, { useEffect, useState, useRef } from 'react'
+import { useTranslation } from 'react-i18next'
+import { debugConsole } from '@/utils/debugging'
+import { getJSON, postJSON } from '@/infrastructure/fetch-json'
+import Notification from '@/shared/components/notification'
+import {
+  OLModalBody,
+  OLModalFooter,
+  OLModalHeader,
+  OLModalTitle,
+} from '@/features/ui/components/ol/ol-modal'
+import OLForm from '@/features/ui/components/ol/ol-form'
+import OLButton from '@/features/ui/components/ol/ol-button'
+import { useDetachCompileContext } from '@/shared/context/detach-compile-context'
+import { useUserContext } from '@/shared/context/user-context'
+import { useFocusTrap } from '../../hooks/use-focus-trap'
+import TemplateFormFields from '../form/template-form-fields'
+import type { Template } from '../../../../../../types/template'
+
+
+interface ManageTemplateModalContentProps {
+  handleHide: () => void
+  inFlight: boolean
+  setInFlight: (inFlight: boolean) => void
+  handleAfterPublished: (data: Template) => void
+  projectId: string
+  projectName: string
+}
+
+export default function ManageTemplateModalContent({
+  handleHide,
+  inFlight,
+  setInFlight,
+  handleAfterPublished,
+  projectId,
+  projectName,
+}: ManageTemplateModalContentProps) {
+  const { t } = useTranslation()
+  const { pdfFile } = useDetachCompileContext()
+  const user = useUserContext()
+
+  const [template, setTemplate] = useState<Partial<Template>>({
+    name: projectName,
+    authorMD: `${user.first_name} ${user.last_name}`.trim(),
+  })
+  const [override, setOverride] = useState(false)
+  const [titleConflict, setTitleConflict] = useState(false)
+  const [error, setError] = useState<string | false>(false)
+  const [notificationType, setNotificationType] = useState<'error' | 'warning'>('error')
+  const [disablePublish, setDisablePublish] = useState(false)
+
+  // Only the trimmed name gates submission
+  const valid = (template.name ?? '').trim()
+
+  useEffect(() => {
+    const queryParams = new URLSearchParams({ key: 'name', val: projectName })
+    getJSON(`/api/template?${queryParams}`)
+      .then((data) => {
+        if (!data) return
+        setTemplate(prev => ({
+          ...prev,
+          descriptionMD: data.descriptionMD,
+          authorMD: data.authorMD,
+          license: data.license,
+          category: data.category,
+        }))
+      })
+      .catch(debugConsole.error)
+  }, [])
+
+  const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
+    event.preventDefault()
+
+    if (!valid) return
+
+    setError(false)
+    setInFlight(true)
+
+    postJSON(`/template/new/${projectId}`, {
+      body: {
+        category: template.category,
+        name: valid,
+        authorMD: (template.authorMD ?? '').trim(),
+        license: template.license,
+        descriptionMD: (template.descriptionMD ?? '').trim(),
+        build: pdfFile.build,
+        override,
+      },
+    })
+      .then(data => {
+        handleHide()
+        handleAfterPublished(data)
+      })
+      .catch(({ response, data }) => {
+        if (response?.status === 409 && data.canOverride) {
+          setNotificationType('warning')
+          setOverride(true)
+        } else {
+          setNotificationType('error')
+          setDisablePublish(true)
+        }
+        setError(data.message)
+        if (response?.status === 409) setTitleConflict(true)
+      })
+      .finally(() => {
+        setInFlight(false)
+      })
+  }
+
+  const handleChange = (changes: Partial<Template>) => {
+    if ('name' in changes && titleConflict) {
+      setError(false)
+      setOverride(false)
+      if (disablePublish) setDisablePublish(false)
+    }
+    setTemplate(prev => ({ ...prev, ...changes }))
+  }
+
+  const handleEnterKey = () => {
+    document.getElementById('submit-publish-template')?.click()
+  }
+
+  const modalRef = useRef<HTMLDivElement>(null)
+  useFocusTrap(modalRef)
+
+  return (
+    <div ref={modalRef}>
+      <OLModalHeader closeButton>
+        <OLModalTitle>{t('publish_as_template')}</OLModalTitle>
+      </OLModalHeader>
+
+      <OLModalBody>
+        <div className="modal-body-publish">
+          <div className="content-as-table">
+            <OLForm id="publish-template-form" onSubmit={handleSubmit}>
+              <TemplateFormFields
+                template={template}
+                includeLanguage={false}
+                onChange={handleChange}
+                onEnterKey={handleEnterKey}
+              />
+            </OLForm>
+          </div>
+        </div>
+        {error && (
+          <Notification
+            content={error.length ? error : t('generic_something_went_wrong')}
+            type={notificationType}
+          />
+        )}
+      </OLModalBody>
+
+      <OLModalFooter>
+        <OLButton variant="secondary" disabled={inFlight} onClick={handleHide}>
+          {t('cancel')}
+        </OLButton>
+        <OLButton
+          id="submit-publish-template"
+          variant={override ? 'danger' : 'primary'}
+          disabled={inFlight || !valid || disablePublish}
+          form="publish-template-form"
+          type="submit"
+        >
+          {inFlight ? <>{t('publishing')}…</> : override ? t('overwrite') : t('publish')}
+        </OLButton>
+      </OLModalFooter>
+    </div>
+  )
+}

services/web/frontend/js/features/template/components/manage-template-modal/manage-template-modal.tsx

@@ -0,0 +1,52 @@
+import React, { memo, useCallback, useState } from 'react'
+import OLModal from '@/features/ui/components/ol/ol-modal'
+import ManageTemplateModalContent from './manage-template-modal-content'
+import type { Template } from '../../../../../../types/template'
+
+interface ManageTemplateModalProps {
+  show: boolean
+  handleHide: () => void
+  handleAfterPublished: (data: Template) => void
+  projectId: string
+  projectName: string
+}
+
+function ManageTemplateModal({
+  show,
+  handleHide,
+  handleAfterPublished,
+  projectId,
+  projectName,
+}: ManageTemplateModalProps) {
+  const [inFlight, setInFlight] = useState(false)
+
+  const onHide = useCallback(() => {
+    if (!inFlight) {
+      handleHide()
+    }
+  }, [handleHide, inFlight])
+
+  return (
+    <OLModal
+      size="lg"
+      animation
+      show={show}
+      onHide={onHide}
+      id="publish-template-modal"
+      // backdrop="static" will disable closing the modal by clicking
+      // outside of the modal element
+      backdrop='static'
+    >
+      <ManageTemplateModalContent
+        handleHide={onHide}
+        inFlight={inFlight}
+        setInFlight={setInFlight}
+        handleAfterPublished={handleAfterPublished}
+        projectId={projectId}
+        projectName={projectName}
+      />
+    </OLModal>
+  )
+}
+
+export default memo(ManageTemplateModal)