From 05affd313f9e357549f74f57940a5b599605f532 Mon Sep 17 00:00:00 2001
From: Henrik Giesel <hengiesel@gmail.com>
Date: Wed, 14 Apr 2021 14:29:06 +0200
Subject: [PATCH] Include Dropdown directly from bootstrap, required installing
 popperjs

---
 ts/editor-toolbar/BUILD.bazel             |  3 +++
 ts/editor-toolbar/WithDropdownMenu.svelte |  3 ++-
 ts/editor-toolbar/dropdown.scss           |  4 ++++
 ts/editor-toolbar/index.ts                |  3 ++-
 ts/licenses.json                          |  8 ++++++++
 ts/package.json                           |  1 +
 ts/yarn.lock                              | 10 ++++++++++
 7 files changed, 30 insertions(+), 2 deletions(-)
 create mode 100644 ts/editor-toolbar/dropdown.scss

diff --git a/ts/editor-toolbar/BUILD.bazel b/ts/editor-toolbar/BUILD.bazel
index 08a004ae9..69b34fdd8 100644
--- a/ts/editor-toolbar/BUILD.bazel
+++ b/ts/editor-toolbar/BUILD.bazel
@@ -20,6 +20,7 @@ compile_sass(
     srcs = [
         "color.scss",
         "legacy.scss",
+        "dropdown.scss",
     ],
     deps = [],
     visibility = ["//visibility:public"],
@@ -50,6 +51,8 @@ ts_library(
         "//ts/sveltelib",
         "//ts:image_module_support",
         "@npm//svelte",
+        "@npm//bootstrap",
+        "@npm//@popperjs/core",
     ],
 )
 
diff --git a/ts/editor-toolbar/WithDropdownMenu.svelte b/ts/editor-toolbar/WithDropdownMenu.svelte
index d476aad22..d412833b4 100644
--- a/ts/editor-toolbar/WithDropdownMenu.svelte
+++ b/ts/editor-toolbar/WithDropdownMenu.svelte
@@ -1,5 +1,6 @@
 <script lang="typescript">
     import type { ToolbarItem } from "./types";
+    import Dropdown from "bootstrap/js/dist/dropdown";
 
     /* Bootstrap dropdown are normally declared alongside the associated button
      * However we cannot do that, as the menus cannot be declared in sticky-positioned elements
@@ -28,7 +29,7 @@
          * Rendering the menu here would cause the menu to
          * be displayed outside of the visible area
          */
-        const dropdown = new bootstrap.Dropdown(button);
+        const dropdown = new Dropdown(button);
         const menu = button.getRootNode().getElementById(menuId);
 
         if (!menu) {
diff --git a/ts/editor-toolbar/dropdown.scss b/ts/editor-toolbar/dropdown.scss
new file mode 100644
index 000000000..650407c83
--- /dev/null
+++ b/ts/editor-toolbar/dropdown.scss
@@ -0,0 +1,4 @@
+@import "ts/node_modules/bootstrap/scss/functions";
+@import "ts/node_modules/bootstrap/scss/variables";
+@import "ts/node_modules/bootstrap/scss/mixins";
+@import "ts/node_modules/bootstrap/scss/dropdown";
diff --git a/ts/editor-toolbar/index.ts b/ts/editor-toolbar/index.ts
index d5efc0fd9..68119443d 100644
--- a/ts/editor-toolbar/index.ts
+++ b/ts/editor-toolbar/index.ts
@@ -12,11 +12,12 @@ import EditorToolbarSvelte from "./EditorToolbar.svelte";
 import { checkNightMode } from "anki/nightmode";
 import { setupI18n, ModuleName } from "anki/i18n";
 
+import "./dropdown.css";
+
 import { getNotetypeGroup } from "./notetype";
 import { getFormatGroup } from "./format";
 import { getColorGroup } from "./color";
 import { getTemplateGroup, getTemplateMenus } from "./template";
-
 import { Identifiable, search, add, insert } from "./identifiable";
 
 interface Hideable {
diff --git a/ts/licenses.json b/ts/licenses.json
index 3c74d8774..155dcb2c8 100644
--- a/ts/licenses.json
+++ b/ts/licenses.json
@@ -14,6 +14,14 @@
         "path": "node_modules/@mdi/svg",
         "licenseFile": "node_modules/@mdi/svg/LICENSE"
     },
+    "@popperjs/core@2.9.2": {
+        "licenses": "MIT",
+        "repository": "https://github.com/popperjs/popper-core",
+        "publisher": "Federico Zivolo",
+        "email": "federico.zivolo@gmail.com",
+        "path": "node_modules/@popperjs/core",
+        "licenseFile": "node_modules/@popperjs/core/LICENSE.md"
+    },
     "@protobufjs/aspromise@1.1.2": {
         "licenses": "BSD-3-Clause",
         "repository": "https://github.com/dcodeIO/protobuf.js",
diff --git a/ts/package.json b/ts/package.json
index 7df6203cc..5940f45b8 100644
--- a/ts/package.json
+++ b/ts/package.json
@@ -55,6 +55,7 @@
     "dependencies": {
         "@fluent/bundle": "^0.15.1",
         "@mdi/svg": "^5.9.55",
+        "@popperjs/core": "^2.9.2",
         "bootstrap": "^5.0.0-beta2",
         "bootstrap-icons": "^1.4.0",
         "css-browser-selector": "^0.6.5",
diff --git a/ts/yarn.lock b/ts/yarn.lock
index 69c07b3b3..14613590b 100644
--- a/ts/yarn.lock
+++ b/ts/yarn.lock
@@ -519,6 +519,16 @@
     "@types/yargs" "^16.0.0"
     chalk "^4.0.0"
 
+"@mdi/svg@^5.9.55":
+  version "5.9.55"
+  resolved "https://registry.yarnpkg.com/@mdi/svg/-/svg-5.9.55.tgz#7cba058135afd5d8a3da977f51b71ffc6a3a3699"
+  integrity sha512-gO0ZpKIeCn9vFg46QduK9MM+n1fuCNwSdcdlBTtbafnnuvwLveK2uj+byhdLtg/8VJGXDhp+DJ35QUMbeWeULA==
+
+"@popperjs/core@^2.9.2":
+  version "2.9.2"
+  resolved "https://registry.yarnpkg.com/@popperjs/core/-/core-2.9.2.tgz#adea7b6953cbb34651766b0548468e743c6a2353"
+  integrity sha512-VZMYa7+fXHdwIq1TDhSXoVmSPEGM/aa+6Aiq3nVVJ9bXr24zScr+NlKFKC3iPljA7ho/GAZr+d2jOf5GIRC30Q==
+
 "@protobufjs/aspromise@^1.1.1", "@protobufjs/aspromise@^1.1.2":
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/@protobufjs/aspromise/-/aspromise-1.1.2.tgz#9b8b0cc663d669a7d8f6f5d0893a14d348f30fbf"