render candidate window (#2)

.github/workflows/ci.yml

@@ -17,16 +17,22 @@ jobs:
         with:
           submodules: recursive
 
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 22.x
+
       - name: Install dependencies
         run: |
           sudo apt install -y clang-format \
             ninja-build \
             extra-cmake-modules \
             gettext
+          npm i -g pnpm
+          pnpm --prefix=fcitx5-webview i
 
       - name: Lint
         run: |
-          find src wasmfrontend -name '*.h' -o -name '*.cpp' | xargs clang-format -Werror --dry-run
+          find src wasmfrontend webpanel -name '*.h' -o -name '*.cpp' | xargs clang-format -Werror --dry-run
 
       - name: Install emsdk
         run: |
@@ -40,13 +46,15 @@ jobs:
           ./install-deps.sh
           . emsdk/emsdk_env.sh
           export EMCC_FORCE_STDLIBS=libc++
+          export FCITX_DISTRIBUTION=fcitx5-js
           pushd fcitx5 && git apply ../patches/fcitx5.patch && popd
-          emcmake cmake -B build -G Ninja \
+          PKG_CONFIG_PATH=build/sysroot/usr/share/pkgconfig emcmake cmake -B build -G Ninja \
             -DCMAKE_BUILD_TYPE=Release \
             -DCMAKE_INSTALL_PREFIX=/usr
           cmake --build build || true
           DESTDIR=$(pwd)/build/sysroot cmake --install build/fcitx5
           DESTDIR=$(pwd)/build/sysroot cmake --install build/wasmfrontend
+          DESTDIR=$(pwd)/build/sysroot cmake --install build/webpanel
           cmake --build build
           tar chjvf fcitx5-js.tar.bz2 preview
           cd build/sysroot/usr && tar cjvf ../../../fcitx5-js-dev.tar.bz2 include lib

.gitmodules

@@ -1,3 +1,6 @@
 [submodule "fcitx5"]
 	path = fcitx5
 	url = https://github.com/fcitx/fcitx5
+[submodule "fcitx5-webview"]
+	path = fcitx5-webview
+	url = https://github.com/fcitx-contrib/fcitx5-webview

CMakeLists.txt

@@ -1,6 +1,6 @@
 cmake_minimum_required(VERSION 3.27)
 
-project(fcitx5-wasm VERSION 0.1.0)
+project(fcitx5-js VERSION 0.1.0)
 
 set(CMAKE_EXPORT_COMPILE_COMMANDS ON)
 
@@ -28,12 +28,14 @@ option(USE_SYSTEMD "" OFF)
 option(ENABLE_XDGAUTOSTART "" OFF)
 option(ENABLE_EMOJI "" OFF)
 option(ENABLE_LIBUUID "" OFF)
-option(ENABLE_ASAN "Enable Address Sanitizer" OFF)
 option(BUILD_SPELL_DICT "" OFF)
+option(BUILD_PREVIEW "" OFF)
 
 set(CMAKE_INSTALL_LIBDATADIR "${CMAKE_INSTALL_PREFIX}/lib")
 add_subdirectory(fcitx5)
 
 add_subdirectory(wasmfrontend)
+add_subdirectory(fcitx5-webview)
+add_subdirectory(webpanel)
 
 add_subdirectory(src)

install-deps.sh

@@ -1,5 +1,6 @@
 deps=(
   fmt
+  json
 )
 
 EXTRACT_DIR=build/sysroot/usr
@@ -10,3 +11,5 @@ for dep in "${deps[@]}"; do
   [[ -f cache/$file ]] || wget -P cache https://github.com/fcitx-contrib/fcitx5-js-prebuilder/releases/download/latest/$file
   tar xjvf cache/$file -C $EXTRACT_DIR
 done
+
+sed -i "s|/usr/include|$(pwd)/$EXTRACT_DIR/include|" $EXTRACT_DIR/share/pkgconfig/nlohmann_json.pc

preview/index.html

@@ -20,6 +20,40 @@
         }
         console.log(Module.ccall('process_key', 'bool', ['string'], [e.key]))
       })
+      window.fcitx = {
+        createPanel(html) {
+          const tree = document.createElement('div')
+          tree.innerHTML = html
+          for (let el of [...tree.children]) {
+            switch (el.tagName) {
+            case 'STYLE':
+              document.head.append(el)
+              break
+            case 'DIV':
+              document.body.append(el)
+              break
+            case 'SCRIPT':
+              eval(el.textContent)
+              break
+            }
+          }
+        }
+      }
+      const apis = [
+        'log',
+        'copyHTML',
+        'select',
+        'highlight',
+        'page',
+        'scroll',
+        'askActions',
+        'action',
+        'resize'
+      ]
+      for (const api of apis) {
+        const name = '_' + api
+        window.fcitx[name] = (...args) => Module.ccall('web_action', 'void', ['string', 'string'], [name, JSON.stringify(args)])
+      }
     </script>
   </body>
 </html>

src/CMakeLists.txt

@@ -11,5 +11,6 @@ target_link_libraries(Fcitx5
     "-Lfcitx5/src/lib/fcitx-utils"
     "-Lfcitx5/src/lib/fcitx-config"
     Fcitx5::Core
+    webpanel
     wasmfrontend
 )

src/fcitx.cpp

@@ -1,13 +1,17 @@
 #include "../wasmfrontend/wasmfrontend.h"
+#include "../webpanel/webpanel.h"
 #include <emscripten.h>
 #include <fcitx/instance.h>
 #include <iostream>
 
 using namespace fcitx;
 
 WasmFrontendFactory wasmFrontendFactory;
-StaticAddonRegistry staticAddons = {std::make_pair<std::string, AddonFactory *>(
-    "wasmfrontend", &wasmFrontendFactory)};
+WebPanelFactory webPanelFactory;
+StaticAddonRegistry staticAddons = {
+    std::make_pair<std::string, AddonFactory *>("wasmfrontend",
+                                                &wasmFrontendFactory),
+    std::make_pair<std::string, AddonFactory *>("webpanel", &webPanelFactory)};
 
 std::unique_ptr<Instance> instance;
 WasmFrontend *frontend;

webpanel/CMakeLists.txt

@@ -0,0 +1,11 @@
+add_library(webpanel STATIC webpanel.cpp)
+target_link_libraries(webpanel Fcitx5::Core WebviewCandidateWindow)
+target_include_directories(webpanel PRIVATE
+    "${PROJECT_SOURCE_DIR}/fcitx5-webview/include"
+)
+
+configure_file(webpanel.conf.in.in webpanel.conf.in @ONLY)
+fcitx5_translate_desktop_file(${CMAKE_CURRENT_BINARY_DIR}/webpanel.conf.in webpanel.conf)
+install(FILES "${CMAKE_CURRENT_BINARY_DIR}/webpanel.conf"
+    DESTINATION "${CMAKE_INSTALL_PREFIX}/share/fcitx5/addon"
+)

webpanel/webpanel.conf.in.in

@@ -0,0 +1,7 @@
+[Addon]
+Name=WebPanel
+Type=StaticLibrary
+Library=libwebpanel
+Category=UI
+Version=@PROJECT_VERSION@
+Configurable=True