react-bootstrap-front 3.10.2 → 3.11.0

package/src/features/editor/HtmlEditor.scss

@@ -0,0 +1,189 @@
+/**
+ * Styles de base de ProseMirror.
+ *
+ * Recopiés depuis prosemirror-view/style/prosemirror.css et
+ * prosemirror-gapcursor/style/gapcursor.css (licence MIT, stables depuis des
+ * années) plutôt qu'importés par `~prosemirror-view/...` : avec `npm link`, le
+ * `~` résoudrait dans les node_modules de la librairie et non dans ceux de
+ * l'application, ce qui couplerait la résolution SCSS des deux dépôts.
+ */
+.ProseMirror {
+  position: relative;
+  word-wrap: break-word;
+  white-space: pre-wrap;
+  white-space: break-spaces;
+  -webkit-font-variant-ligatures: none;
+  font-variant-ligatures: none;
+  font-feature-settings: 'liga' 0;
+  outline: none;
+}
+
+.ProseMirror pre {
+  white-space: pre-wrap;
+}
+
+.ProseMirror li {
+  position: relative;
+}
+
+.ProseMirror-hideselection *::selection {
+  background: transparent;
+}
+.ProseMirror-hideselection *::-moz-selection {
+  background: transparent;
+}
+.ProseMirror-hideselection {
+  caret-color: transparent;
+}
+
+.ProseMirror-selectednode {
+  outline: 2px solid #8cf;
+}
+
+li.ProseMirror-selectednode {
+  outline: none;
+}
+
+li.ProseMirror-selectednode:after {
+  content: '';
+  position: absolute;
+  left: -32px;
+  right: -2px;
+  top: -2px;
+  bottom: -2px;
+  border: 2px solid #8cf;
+  pointer-events: none;
+}
+
+img.ProseMirror-separator {
+  display: inline !important;
+  border: none !important;
+  margin: 0 !important;
+}
+
+.ProseMirror-gapcursor {
+  display: none;
+  pointer-events: none;
+  position: absolute;
+}
+
+.ProseMirror-gapcursor:after {
+  content: '';
+  display: block;
+  position: absolute;
+  top: -2px;
+  width: 20px;
+  border-top: 1px solid black;
+  animation: ProseMirror-cursor-blink 1.1s steps(2, start) infinite;
+}
+
+@keyframes ProseMirror-cursor-blink {
+  to {
+    visibility: hidden;
+  }
+}
+
+.ProseMirror-focused .ProseMirror-gapcursor {
+  display: block;
+}
+
+/**
+ * Le champ lui-même.
+ */
+.rbf-editor {
+  .rbf-editor-main {
+    padding: 0;
+    display: flex;
+    flex-direction: column;
+    min-width: 0;
+    /* Bootstrap pose flex:1 sur .form-control dans un input-group, mais le
+       contenu ne doit pas déborder de l'input-group. */
+    flex: 1 1 auto;
+    width: 1%;
+  }
+
+  /* La hauteur est bornée : sans cela les six champs d'un même formulaire
+     font exploser la page. Le contenu défile à l'intérieur. */
+  .rbf-editor-scroll {
+    overflow-y: auto;
+    overflow-x: hidden;
+  }
+
+  .rbf-editor-content {
+    padding: 0.375rem 0.75rem;
+    min-height: 100%;
+  }
+
+  /* Marges resserrées : dans un champ de formulaire, l'espacement par défaut
+     des paragraphes donne une impression de contenu troué. */
+  .rbf-editor-content {
+    p,
+    ul,
+    ol,
+    blockquote,
+    h1,
+    h2,
+    h3 {
+      margin-top: 0;
+      margin-bottom: 0.5rem;
+    }
+
+    > *:last-child {
+      margin-bottom: 0;
+    }
+
+    img {
+      max-width: 100%;
+      height: auto;
+    }
+
+    blockquote {
+      padding-left: 0.75rem;
+      border-left: 3px solid theme-color('secondary-light');
+    }
+
+    hr {
+      margin: 0.5rem 0;
+    }
+
+    a {
+      text-decoration: underline;
+    }
+  }
+
+  /* Le texte indicatif de l'extension Placeholder. */
+  .rbf-editor-content p.is-editor-empty:first-child::before {
+    content: attr(data-placeholder);
+    float: left;
+    height: 0;
+    pointer-events: none;
+    color: theme-color('secondary-inactive');
+  }
+
+  .rbf-editor-append .btn {
+    max-height: 40px;
+  }
+
+  &.rbf-editor-disabled .rbf-editor-main {
+    background-color: $input-disabled-bg;
+  }
+}
+
+/**
+ * Variables de fusion. La variante « inconnue » est le vrai apport : une
+ * variable mal orthographiée se voit à la frappe, alors qu'elle ne se
+ * découvrait jusqu'ici qu'à l'envoi du courriel.
+ */
+.rbf-mergevar {
+  background: #e8f5e9;
+  color: #105a1c;
+  border-radius: 3px;
+  padding: 0 2px;
+  white-space: nowrap;
+}
+
+.rbf-mergevar-unknown {
+  background: #fdecea;
+  color: #b71c1c;
+  text-decoration: underline wavy;
+}

package/src/features/editor/ImageDialog.js

@@ -0,0 +1,195 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import classnames from 'classnames';
+
+/**
+ * Insertion d'une image.
+ *
+ * Deux voies :
+ *  - une adresse, toujours disponible et de loin la plus sûre pour un
+ *    courriel : les images doivent être hébergées, pas embarquées ;
+ *  - un fichier, seulement si l'application fournit `onUpload`. Sans endpoint
+ *    d'upload, l'onglet propose un repli en data-URL plafonné, avec
+ *    l'avertissement qui va avec.
+ */
+export default class ImageDialog extends Component {
+  static propTypes = {
+    onApply: PropTypes.func.isRequired,
+    onCancel: PropTypes.func.isRequired,
+    /** (File) => Promise<url>. Absente, l'onglet fichier passe en data-URL. */
+    onUpload: PropTypes.func,
+    /** Autorise le repli data-URL quand onUpload est absente. */
+    allowDataUrl: PropTypes.bool,
+    maxImageSize: PropTypes.number,
+    t: PropTypes.func.isRequired,
+  };
+
+  static defaultProps = {
+    onUpload: null,
+    allowDataUrl: true,
+    maxImageSize: 524288,
+  };
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      tab: 'url',
+      src: '',
+      alt: '',
+      width: '',
+      pending: false,
+      error: null,
+    };
+    this.srcRef = React.createRef();
+    this.onApply = this.onApply.bind(this);
+    this.onFile = this.onFile.bind(this);
+  }
+
+  componentDidMount() {
+    if (this.srcRef.current) {
+      this.srcRef.current.focus();
+    }
+  }
+
+  onApply() {
+    const src = this.state.src.trim();
+    if (src === '') {
+      this.setState({ error: this.props.t({ id: 'ui.editor.image.url', defaultMessage: 'Enter an address' }) });
+      return;
+    }
+    this.props.onApply({ src, alt: this.state.alt, width: this.state.width || null });
+  }
+
+  onFile(ev) {
+    const file = ev.target.files && ev.target.files[0];
+    if (!file) {
+      return;
+    }
+    const { t, onUpload, maxImageSize, allowDataUrl } = this.props;
+    this.setState({ pending: true, error: null });
+
+    if (onUpload) {
+      onUpload(file).then(
+        url => this.setState({ pending: false, src: url, tab: 'url' }),
+        () => this.setState({ pending: false, error: t({ id: 'ui.editor.image.uploadError', defaultMessage: 'Upload failed' }) }),
+      );
+      return;
+    }
+
+    if (!allowDataUrl) {
+      this.setState({ pending: false, error: t({ id: 'ui.editor.image.uploadError', defaultMessage: 'Upload failed' }) });
+      return;
+    }
+    if (file.size > maxImageSize) {
+      this.setState({
+        pending: false,
+        error: t({
+          id: 'ui.editor.image.tooLarge',
+          defaultMessage: 'Image too large to be embedded, host it and paste its address',
+        }),
+      });
+      return;
+    }
+    const reader = new FileReader();
+    reader.onload = () => this.setState({ pending: false, src: reader.result, tab: 'url' });
+    reader.onerror = () =>
+      this.setState({ pending: false, error: t({ id: 'ui.editor.image.uploadError', defaultMessage: 'Upload failed' }) });
+    reader.readAsDataURL(file);
+  }
+
+  renderTabs() {
+    const { t } = this.props;
+    return (
+      <ul className="nav nav-tabs nav-tabs-sm mb-2">
+        <li className="nav-item">
+          <button
+            type="button"
+            className={classnames('nav-link btn btn-link', this.state.tab === 'url' && 'active')}
+            onClick={() => this.setState({ tab: 'url' })}
+          >
+            {t({ id: 'ui.editor.image.url', defaultMessage: 'Address' })}
+          </button>
+        </li>
+        <li className="nav-item">
+          <button
+            type="button"
+            className={classnames('nav-link btn btn-link', this.state.tab === 'file' && 'active')}
+            onClick={() => this.setState({ tab: 'file' })}
+          >
+            {t({ id: 'ui.editor.image.upload', defaultMessage: 'File' })}
+          </button>
+        </li>
+      </ul>
+    );
+  }
+
+  render() {
+    const { t, onUpload, allowDataUrl } = this.props;
+    const showFileTab = !!onUpload || allowDataUrl;
+    return (
+      <div className="rbf-editor-dialog">
+        {showFileTab && this.renderTabs()}
+        {this.state.tab === 'file' ? (
+          <div>
+            <input type="file" accept="image/*" className="form-control-file" onChange={this.onFile} />
+            {!onUpload && (
+              <small className="form-text text-muted">
+                {t({
+                  id: 'ui.editor.image.dataUrlWarning',
+                  defaultMessage: 'The image will be embedded in the content and may be blocked by mail clients.',
+                })}
+              </small>
+            )}
+            {this.state.pending && (
+              <small className="form-text text-muted">
+                {t({ id: 'ui.editor.image.uploading', defaultMessage: 'Sending…' })}
+              </small>
+            )}
+          </div>
+        ) : (
+          <div className="form-row align-items-end">
+            <div className="col">
+              <label className="rbf-editor-dialog-label">{t({ id: 'ui.editor.image.url', defaultMessage: 'Address' })}</label>
+              <input
+                ref={this.srcRef}
+                type="text"
+                className="form-control form-control-sm"
+                value={this.state.src}
+                placeholder="https://"
+                onChange={ev => this.setState({ src: ev.target.value, error: null })}
+              />
+            </div>
+            <div className="col">
+              <label className="rbf-editor-dialog-label">{t({ id: 'ui.editor.image.alt', defaultMessage: 'Alt text' })}</label>
+              <input
+                type="text"
+                className="form-control form-control-sm"
+                value={this.state.alt}
+                onChange={ev => this.setState({ alt: ev.target.value })}
+              />
+            </div>
+            <div className="col-auto" style={{ maxWidth: '8rem' }}>
+              <label className="rbf-editor-dialog-label">{t({ id: 'ui.editor.image.width', defaultMessage: 'Width' })}</label>
+              <input
+                type="text"
+                className="form-control form-control-sm"
+                value={this.state.width}
+                placeholder="600"
+                onChange={ev => this.setState({ width: ev.target.value })}
+              />
+            </div>
+            <div className="col-auto">
+              <button type="button" className="btn btn-sm btn-primary" onClick={this.onApply}>
+                {t({ id: 'ui.editor.image.apply', defaultMessage: 'Insert' })}
+              </button>
+              <button type="button" className="btn btn-sm btn-link" onClick={this.props.onCancel}>
+                {t({ id: 'ui.editor.dialog.cancel', defaultMessage: 'Cancel' })}
+              </button>
+            </div>
+          </div>
+        )}
+        {this.state.error && <div className="text-danger small mt-1">{this.state.error}</div>}
+      </div>
+    );
+  }
+}

package/src/features/editor/LinkDialog.js

@@ -0,0 +1,148 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+
+const SAFE_SCHEME = /^(https?:|mailto:|tel:|#|\/)/i;
+
+/**
+ * Saisie d'un lien.
+ *
+ * Panneau en ligne plutôt que modale : l'éditeur reste visible, et surtout on
+ * n'ouvre pas une modale à l'intérieur d'une modale — la plupart des
+ * formulaires appelants sont déjà dans un `ResponsiveModalOrForm`.
+ *
+ * La cible se choisit ici, lien par lien, et n'est jamais forcée globalement :
+ * un `target="_blank"` posé par défaut réécrirait tous les liens de la base au
+ * premier enregistrement.
+ */
+export default class LinkDialog extends Component {
+  static propTypes = {
+    url: PropTypes.string,
+    text: PropTypes.string,
+    target: PropTypes.string,
+    canRemove: PropTypes.bool,
+    /** Vrai si du texte est sélectionné : le libellé n'est alors pas demandé. */
+    hasSelection: PropTypes.bool,
+    onApply: PropTypes.func.isRequired,
+    onRemove: PropTypes.func.isRequired,
+    onCancel: PropTypes.func.isRequired,
+    t: PropTypes.func.isRequired,
+  };
+
+  static defaultProps = {
+    url: '',
+    text: '',
+    target: '',
+    canRemove: false,
+    hasSelection: false,
+  };
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      url: props.url,
+      text: props.text,
+      blank: props.target === '_blank',
+      error: null,
+    };
+    this.urlRef = React.createRef();
+    this.onApply = this.onApply.bind(this);
+    this.onKeyDown = this.onKeyDown.bind(this);
+  }
+
+  componentDidMount() {
+    if (this.urlRef.current) {
+      this.urlRef.current.focus();
+    }
+  }
+
+  onKeyDown(ev) {
+    if (ev.key === 'Enter') {
+      ev.preventDefault();
+      this.onApply();
+    } else if (ev.key === 'Escape') {
+      ev.preventDefault();
+      this.props.onCancel();
+    }
+  }
+
+  onApply() {
+    const url = this.state.url.trim();
+    if (url === '') {
+      this.setState({ error: this.props.t({ id: 'ui.editor.link.invalidUrl', defaultMessage: 'Enter an address' }) });
+      return;
+    }
+    if (!SAFE_SCHEME.test(url)) {
+      /* Une adresse sans schéma est presque toujours un oubli de https://,
+         et accepter n'importe quel schéma ouvrirait la porte à javascript:. */
+      if (url.indexOf(':') !== -1) {
+        this.setState({
+          error: this.props.t({ id: 'ui.editor.link.invalidUrl', defaultMessage: 'Unsupported address' }),
+        });
+        return;
+      }
+      this.props.onApply({ url: 'https://' + url, text: this.state.text, target: this.state.blank ? '_blank' : null });
+      return;
+    }
+    this.props.onApply({ url, text: this.state.text, target: this.state.blank ? '_blank' : null });
+  }
+
+  render() {
+    const { t, canRemove, hasSelection } = this.props;
+    return (
+      <div className="rbf-editor-dialog" onKeyDown={this.onKeyDown}>
+        <div className="form-row align-items-end">
+          <div className="col">
+            <label className="rbf-editor-dialog-label">{t({ id: 'ui.editor.link.url', defaultMessage: 'Address' })}</label>
+            <input
+              ref={this.urlRef}
+              type="text"
+              className="form-control form-control-sm"
+              value={this.state.url}
+              placeholder="https://"
+              onChange={ev => this.setState({ url: ev.target.value, error: null })}
+            />
+          </div>
+          {!hasSelection && (
+            <div className="col">
+              <label className="rbf-editor-dialog-label">{t({ id: 'ui.editor.link.label', defaultMessage: 'Label' })}</label>
+              <input
+                type="text"
+                className="form-control form-control-sm"
+                value={this.state.text}
+                onChange={ev => this.setState({ text: ev.target.value })}
+              />
+            </div>
+          )}
+          <div className="col-auto">
+            <div className="custom-control custom-checkbox">
+              <input
+                type="checkbox"
+                className="custom-control-input"
+                id="rbf-editor-link-blank"
+                checked={this.state.blank}
+                onChange={ev => this.setState({ blank: ev.target.checked })}
+              />
+              <label className="custom-control-label" htmlFor="rbf-editor-link-blank">
+                {t({ id: 'ui.editor.link.target', defaultMessage: 'New window' })}
+              </label>
+            </div>
+          </div>
+          <div className="col-auto">
+            <button type="button" className="btn btn-sm btn-primary" onClick={this.onApply}>
+              {t({ id: 'ui.editor.link.apply', defaultMessage: 'Apply' })}
+            </button>
+            {canRemove && (
+              <button type="button" className="btn btn-sm btn-outline-danger ml-1" onClick={this.props.onRemove}>
+                {t({ id: 'ui.editor.link.remove', defaultMessage: 'Remove' })}
+              </button>
+            )}
+            <button type="button" className="btn btn-sm btn-link" onClick={this.props.onCancel}>
+              {t({ id: 'ui.editor.dialog.cancel', defaultMessage: 'Cancel' })}
+            </button>
+          </div>
+        </div>
+        {this.state.error && <div className="text-danger small mt-1">{this.state.error}</div>}
+      </div>
+    );
+  }
+}

package/src/features/editor/MergeMenu.js

@@ -0,0 +1,120 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+
+/**
+ * Normalise la structure des variables de fusion.
+ *
+ * Accepte la forme groupée `[{ group, items: [{ code, label, help }] }]` et
+ * l'ancienne forme plate `[{ text_code, text_content }]` de `presetTexts`,
+ * repliée en un groupe unique. La prop historique reste donc fonctionnelle.
+ */
+export function normalizeMergeVars(mergeVars, fallbackGroupLabel) {
+  if (!Array.isArray(mergeVars) || mergeVars.length === 0) {
+    return [];
+  }
+  const flat = [];
+  const groups = [];
+  for (let i = 0; i < mergeVars.length; i++) {
+    const entry = mergeVars[i];
+    if (!entry) {
+      continue;
+    }
+    if (Array.isArray(entry.items)) {
+      groups.push({
+        key: entry.key || entry.group || String(i),
+        group: entry.group || '',
+        items: entry.items.filter(item => item && item.code),
+      });
+    } else if (entry.code || entry.text_code) {
+      flat.push({
+        code: entry.code || entry.text_code,
+        label: entry.label || entry.text_content || entry.code || entry.text_code,
+        help: entry.help || '',
+      });
+    }
+  }
+  if (flat.length > 0) {
+    groups.push({ key: '__flat__', group: fallbackGroupLabel || '', items: flat });
+  }
+  return groups;
+}
+
+function matches(item, needle) {
+  if (needle === '') {
+    return true;
+  }
+  const haystack = ((item.label || '') + ' ' + (item.code || '')).toLowerCase();
+  return haystack.indexOf(needle) !== -1;
+}
+
+/**
+ * Menu d'insertion des variables de fusion.
+ * Le champ de filtre devient indispensable dès une trentaine de variables.
+ */
+export default class MergeMenu extends Component {
+  static propTypes = {
+    groups: PropTypes.array.isRequired,
+    onSelect: PropTypes.func.isRequired,
+    t: PropTypes.func.isRequired,
+  };
+
+  constructor(props) {
+    super(props);
+    this.state = { filter: '' };
+    this.onFilter = this.onFilter.bind(this);
+  }
+
+  onFilter(ev) {
+    this.setState({ filter: ev.target.value.toLowerCase() });
+  }
+
+  render() {
+    const { groups, onSelect, t } = this.props;
+    const needle = this.state.filter;
+    const visible = groups
+      .map(group => ({ ...group, items: group.items.filter(item => matches(item, needle)) }))
+      .filter(group => group.items.length > 0);
+
+    return (
+      <div className="rbf-editor-mergemenu">
+        <div className="rbf-editor-mergemenu-search">
+          <input
+            type="text"
+            className="form-control form-control-sm"
+            placeholder={t({ id: 'ui.editor.mergevar.search', defaultMessage: 'Search a variable' })}
+            value={this.state.filter}
+            onChange={this.onFilter}
+            /* Le clic dans le champ ne doit pas refermer le menu. */
+            onClick={ev => ev.stopPropagation()}
+            onMouseDown={ev => ev.stopPropagation()}
+          />
+        </div>
+        <div className="rbf-editor-mergemenu-list">
+          {visible.length === 0 && (
+            <div className="dropdown-item-text text-muted">
+              {t({ id: 'ui.editor.mergevar.empty', defaultMessage: 'No variable' })}
+            </div>
+          )}
+          {visible.map(group => (
+            <div key={group.key}>
+              {group.group !== '' && <h6 className="dropdown-header">{group.group}</h6>}
+              {group.items.map(item => (
+                <button
+                  key={item.code}
+                  type="button"
+                  className="dropdown-item rbf-editor-mergemenu-item"
+                  title={item.help || item.code}
+                  onMouseDown={ev => ev.preventDefault()}
+                  onClick={() => onSelect(item)}
+                >
+                  <span className="rbf-editor-mergemenu-label">{item.label}</span>
+                  <small className="text-muted d-block">{item.code}</small>
+                </button>
+              ))}
+            </div>
+          ))}
+        </div>
+      </div>
+    );
+  }
+}