New Auto-Translator widget

client/extensions/auto-translator/package.json

@@ -0,0 +1,32 @@
+{
+  "private": true,
+  "name": "auto-translator",
+  "version": "1.0.0",
+  "description": "Translation Widget",
+  "main": "dist/src/extension.js",
+  "scripts": {
+    "compile": "tsc -p src",
+    "compile-e2e": "echo 'No end-to-end tests defined'",
+    "watch": "tsc -watch -p src"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "devDependencies": {
+    "@types/diff-match-patch": "1.0.36",
+    "@types/dompurify": "3.0.5",
+    "superdesk-code-style": "1.3.0",
+    "typescript": "4.9.5"
+  },
+  "dependencies": {
+    "diff-match-patch": "1.0.5",
+    "formik": "2.4.6",
+    "superdesk-ui-framework": "3.1.18"
+  },
+  "superdeskExtension": {
+    "translations-extract-paths": [
+      "./src"
+    ],
+    "translations-directory": "translations"
+  }
+}

client/extensions/auto-translator/src/components/buton.tsx

@@ -0,0 +1,86 @@
+import * as React from "react";
+import {
+  Spinner,
+  Button as SuperdeskButton,
+} from "superdesk-ui-framework/react";
+
+type SuperdeskButtonProps = React.ComponentProps<typeof SuperdeskButton>;
+
+type SuperdeskButtonStyles =
+  | Exclude<
+      SuperdeskButtonProps[keyof Pick<
+        SuperdeskButtonProps,
+        "size" | "type" | "style" | "theme"
+      >],
+      undefined | "light"
+    >
+  | "expand"
+  | "disabled"
+  | "iconOnly"
+  | "iconOnlyCircle";
+
+const superdeskButtonClasses: Record<SuperdeskButtonStyles, string> = {
+  expand: "btn--expanded",
+  small: "btn--small",
+  normal: "btn--normal",
+  large: "btn--large",
+  default: "btn--default",
+  primary: "btn--primary",
+  success: "btn--success",
+  warning: "btn--warning",
+  alert: "btn--alert",
+  highlight: "btn--highlight",
+  "sd-green": "btn--sd-green",
+  filled: "btn--filled",
+  hollow: "btn--hollow",
+  "text-only": "btn--text-only",
+  disabled: "btn--disabled",
+  iconOnly: "btn--icon-only",
+  dark: "btn--ui-dark",
+  iconOnlyCircle: "btn--icon-only-circle",
+};
+
+type ButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement> & {
+  label: React.ReactNode;
+  superdeskButtonProps?: Partial<SuperdeskButtonProps>;
+};
+
+export const Button = ({
+  label,
+  superdeskButtonProps,
+  className,
+  ...props
+}: ButtonProps) => {
+  const classes = ["btn"];
+
+  if (superdeskButtonProps?.expand) classes.push(superdeskButtonClasses.expand);
+  if (superdeskButtonProps?.size)
+    classes.push(superdeskButtonClasses[superdeskButtonProps.size]);
+  if (superdeskButtonProps?.type)
+    classes.push(superdeskButtonClasses[superdeskButtonProps.type]);
+  if (superdeskButtonProps?.style)
+    classes.push(superdeskButtonClasses[superdeskButtonProps.style]);
+  if (superdeskButtonProps?.disabled)
+    classes.push(superdeskButtonClasses.disabled);
+  if (superdeskButtonProps?.iconOnly)
+    classes.push(superdeskButtonClasses.iconOnly);
+  if (superdeskButtonProps?.theme === "dark")
+    classes.push(superdeskButtonClasses.dark);
+  if (superdeskButtonProps?.shape === "round" && superdeskButtonProps.iconOnly)
+    classes.push(superdeskButtonClasses.iconOnlyCircle);
+
+  if (className) classes.push(className);
+
+  return (
+    <button
+      type="button"
+      className={classes.join(" ")}
+      disabled={
+        superdeskButtonProps?.disabled || superdeskButtonProps?.isLoading
+      }
+      {...props}
+    >
+      {superdeskButtonProps?.isLoading ? <Spinner size="mini" /> : label}
+    </button>
+  );
+};

client/extensions/auto-translator/src/components/index.ts

@@ -0,0 +1,14 @@
+import { Button } from "./buton";
+import { FormSelect, Select } from "./select";
+import { FormTextEditorInput, TextEditorInput } from "./text-editor-input";
+import { FormTextInput, TextInput } from "./text-input";
+
+export {
+  Button,
+  FormSelect,
+  FormTextEditorInput,
+  FormTextInput,
+  Select,
+  TextEditorInput,
+  TextInput,
+};

client/extensions/auto-translator/src/components/select.tsx

@@ -0,0 +1,56 @@
+import { useField } from "formik";
+import * as React from "react";
+
+type SelectProps = React.InputHTMLAttributes<HTMLSelectElement> & {
+  label: string;
+  field?: any;
+  meta?: any;
+  [key: string]: any;
+};
+
+export const Select = ({
+  children,
+  label,
+  field,
+  meta,
+  ...props
+}: SelectProps) => {
+  return (
+    <div className="sd-input sd-input--medium">
+      <label className="sd-input__label" htmlFor={label} id={`${label}label`}>
+        {label}
+      </label>
+      <div className="sd-input__input-container">
+        <span className="sd-input__select-caret-wrapper">
+          <select
+            {...field}
+            {...props}
+            aria-describedby={`${label}label`}
+            className="sd-input__select"
+            id={label}
+          >
+            {children}
+          </select>
+        </span>
+      </div>
+      {meta?.error && <div className="sd-input__message-box">{meta.error}</div>}
+    </div>
+  );
+};
+
+type FormSelectProps = SelectProps & { name: string };
+
+export const FormSelect = ({
+  name,
+  label,
+  children,
+  ...props
+}: FormSelectProps) => {
+  const [field, meta] = useField(name);
+
+  return (
+    <Select label={label} field={field} meta={meta} {...props}>
+      {children}
+    </Select>
+  );
+};

client/extensions/auto-translator/src/components/text-editor-input.tsx

@@ -0,0 +1,58 @@
+import { useField } from "formik";
+import * as React from "react";
+import { InputWrapper } from "superdesk-ui-framework/react";
+import { superdesk } from "../superdesk";
+
+type TextEditorInputProps = {
+  label: string;
+  value: string;
+  onChange: (value: string) => void;
+  [key: string]: any;
+};
+
+export const TextEditorInput = ({
+  label,
+  value,
+  onChange,
+  ...props
+}: TextEditorInputProps) => {
+  const { Editor3Html } = superdesk.components;
+
+  return (
+    <InputWrapper label={label} fullWidth boxedStyle boxedLable>
+      <Editor3Html
+        key={label}
+        readOnly={false}
+        value={value}
+        onChange={onChange}
+        {...props}
+      />
+    </InputWrapper>
+  );
+};
+
+type FormTextEditorInputProps = Omit<
+  TextEditorInputProps,
+  "value" | "onChange"
+> & { name: string };
+
+export const FormTextEditorInput = ({
+  label,
+  name,
+  ...props
+}: FormTextEditorInputProps) => {
+  // @ts-ignore
+  const [field, meta, helpers] = useField(name);
+  const { setValue } = helpers;
+
+  return (
+    <TextEditorInput
+      label={label}
+      value={field.value}
+      onChange={(value) => {
+        setValue(value);
+      }}
+      {...props}
+    />
+  );
+};

client/extensions/auto-translator/src/components/text-input.tsx

@@ -0,0 +1,45 @@
+import { useField } from "formik";
+import * as React from "react";
+
+type TextInputProps = React.InputHTMLAttributes<HTMLInputElement> & {
+  label: string;
+  field?: any;
+  meta?: any;
+  [key: string]: any;
+};
+
+export const TextInput = ({ label, field, meta, ...props }: TextInputProps) => {
+  return (
+    <div className="sd-input sd-input--medium sd-input--boxed-style sd-input--boxed-label">
+      <label
+        className="sd-input__label sd-input__label--boxed"
+        htmlFor={label}
+        id={`${label}label`}
+      >
+        {label}
+      </label>
+      <div className="sd-input__input-container">
+        <input
+          className="sd-input__input"
+          {...field}
+          {...props}
+          type="text"
+          aria-describedby={`${label}label`}
+        />
+      </div>
+      {meta?.error && <div className="sd-input__message-box">{meta.error}</div>}
+    </div>
+  );
+};
+
+type FormTextInputProps = TextInputProps & { name: string };
+
+export const FormTextInput = ({
+  name,
+  label,
+  ...props
+}: FormTextInputProps) => {
+  const [field, meta] = useField(name);
+
+  return <TextInput label={label} field={field} meta={meta} {...props} />;
+};

client/extensions/auto-translator/src/constants.ts

@@ -0,0 +1,47 @@
+const WIDGET_ID = "auto-translator-widget" as const;
+
+const TRANSLATION_TYPES = {
+  basic: "Google Basic",
+  advanced_nmt: "Google NMT",
+  // advanced_llm: "Google LLM",
+  deepl: "DeepL",
+} as const;
+
+const TRANSLATION_LANGUAGES = {
+  en: "english",
+  fr: "french",
+} as const;
+
+const TRANSLATION_VERSIONS = {
+  original: "original",
+  aiTranslation: "ai translation",
+  manualTranslation: "manual translation",
+} as const;
+
+// https://www.andiamo.co.uk/resources/iso-language-codes/
+const TRANSLATION_LANGUAGES_CODES_MAP = {
+  en: "en",
+  "en-au": "en",
+  "en-bz": "en",
+  "en-ca": "en",
+  "en-ie": "en",
+  "en-jm": "en",
+  "en-nz": "en",
+  "en-za": "en",
+  "en-tt": "en",
+  "en-gb": "en",
+  "en-us": "en",
+  fr: "fr",
+  "fr-be": "fr",
+  "fr-ca": "fr",
+  "fr-lu": "fr",
+  "fr-ch": "fr",
+} as const;
+
+export {
+  WIDGET_ID,
+  TRANSLATION_TYPES,
+  TRANSLATION_LANGUAGES,
+  TRANSLATION_VERSIONS,
+  TRANSLATION_LANGUAGES_CODES_MAP,
+};

client/extensions/auto-translator/src/extension.tsx

@@ -0,0 +1,36 @@
+import {
+  IArticle,
+  IExtension,
+  IExtensionActivationResult,
+} from "superdesk-api";
+import { WIDGET_ID } from "./constants";
+import { superdesk } from "./superdesk";
+import { capitalize } from "./utilities";
+import { AutoTranslatorWidget } from "./widget";
+
+const extension: IExtension = {
+  activate: () => {
+    const { gettext } = superdesk.localization;
+
+    const result: IExtensionActivationResult = {
+      contributions: {
+        authoringSideWidgets: [
+          {
+            _id: WIDGET_ID,
+            label: `${capitalize(gettext("auto"))} ${capitalize(
+              gettext("translate")
+            )}`,
+            icon: "multiedit",
+            order: 1,
+            component: AutoTranslatorWidget,
+            isAllowed: (item: IArticle) => item.type === "text",
+          },
+        ],
+      },
+    };
+
+    return Promise.resolve(result);
+  },
+};
+
+export default extension;

client/extensions/auto-translator/src/superdesk.ts

@@ -0,0 +1,7 @@
+import { ISuperdesk } from "superdesk-api";
+
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore
+export const superdesk = window["extensionsApiInstances"][
+  "auto-translator"
+] as ISuperdesk;

client/extensions/auto-translator/src/tsconfig.json

@@ -0,0 +1,7 @@
+{
+    "extends": "superdesk-code-style/tsconfig-strict",
+    "compilerOptions": {
+        "outDir": "../dist/src",
+        "esModuleInterop": true
+    }
+}