@keepeek/keepicker-react NPM

Integration

Steps to use the Keepicker

Import the JavaScript file registering kpk-keepicker web component:

<head>
  <script
    async
    src="https://cdn.jsdelivr.net/npm/@keepeek/keepicker-react@1/dist/index.js"
  ></script>
</head>

Add the web component tag in the DOM:

<body>
  <kpk-keepicker
    id="keepicker"
    keycloak-client-id="XXX"
    api-endpoint="XXX"
    data-locale="FR"
    ui-locale="FR"
  ></kpk-keepicker>
</body>

Add a callback that will be triggered when selecting an asset:

<script>
  document
    .querySelector("#keepicker")
    .addEventListener("kpk-insert", (event) => {
      console.log(event.detail);
    });
  document
    .querySelector("#keepicker")
    .addEventListener("kpk-insert-link", (event) => {
      console.log(event.detail);
    });
</script>

Use the events to insert content

Keepicker events are triggered for all asset types: pictures, videos, audio files, documents and other assets. Below are some examples of event content.

Event for a picture

kpk-insert event detail will contain the following JSON content for a picture:

{
  "element": {
    "id": 123,
    "title": {
      "id": "title",
      "type": "TEXT",
      "name": "Title",
      "value": "Media title"
    },
    "originalFileName": "123.jpg",
    "previewUrl": "https://keepeek.com/previewUrl.jpg",
    "fields": [
      {
        "id": "title",
        "type": "TEXT",
        "name": "Title",
        "value": "Media title"
      },
      { "id": "...", "type": "...", "name": "...", "value": "..." }
    ],
    "permalinks": [
      {
        "title": "whr",
        "description": "...",
        "url": "https://keepeek.com/permanentPreviewUrl.jpg"
      },
      {
        "title": "...",
        "description": "...",
        "url": "..."
      }
    ],
    "...": "..."
  }
}

To get a picture, use the following code:

const url = event.detail.element.permalinks.find(
  (permalink) => permalink.title === "whr"
)?.url;

Event for a video

kpk-insert event detail will contain the following JSON content for a video:

{
  "element": {
    "id": 123,
    "title": {
      "id": "title",
      "type": "TEXT",
      "name": "Title",
      "value": "Media title"
    },
    "previewUrl": "https://keepeek.com/previewUrl.jpg",
    "fields": [
      {
        "id": "title",
        "type": "TEXT",
        "name": "Title",
        "value": "Media title"
      },
      {
        "id": "...",
        "type": "...",
        "name": "...",
        "value": "..."
      }
    ],
    "mediaType": "video/mp4",
    "permalinks": [
      {
        "title": "preview",
        "description": "...",
        "url": "https://keepeek.com/permanentPreviewVideo.mp4"
      },
      {
        "title": "...",
        "description": "...",
        "url": "..."
      }
    ],
    "...": "..."
  }
}

To get preview video, use the following code:

const url = event.detail.element.permalinks.find(
  (permalink) => permalink.title === "preview"
)?.url;

Event for a generated picture

kpk-insert-link event detail will contain the following JSON content for a generated picture:

{
  "element": {
    "id": 123,
    "title": {
      "id": "title",
      "type": "TEXT",
      "name": "Title",
      "value": "Media title"
    },
    "fields": [
      {
        "id": "title",
        "type": "TEXT",
        "name": "Title",
        "value": "Media title"
      },
      {
        "id": "...",
        "type": "...",
        "name": "...",
        "value": "..."
      }
    ],
    "permalinks": [
      {
        "title": "...",
        "description": "...",
        "url": "..."
      }
    ],
    "...": "..."
  },
  "link": "https://keepeek.com/generatedPictureUrl.jpg"
}

To get generated picture, use the following code:

const url = event.detail.link;

Examples

React

function App() {
  const ref = useRef();

  useEffect(() => {
    if (ref && ref.current) {
      const currentRef = ref.current;
      const handleInsert = (event) => console.log(event.detail.element);
      currentRef.addEventListener("kpk-insert", handleInsert);
      return () => {
        currentRef.removeEventListener("kpk-insert", handleInsert);
      };
    }
  }, []);
  return (
    <div className="App">
      <kpk-keepicker
        ref={ref}
        keycloak-client-id="XXX"
        api-endpoint="XXX"
        data-locale="FR"
        ui-locale="FR"
      ></kpk-keepicker>
    </div>
  );
}

Drupal form

To integrate component in a form, add a container:

$form['container']['picker'] = [
  '#type' => 'container',
  '#attributes' => array('id'=>'kpk-keepicker-container'),
];

Add a behaviour to mount web component:

Drupal.behaviors.addKeepickerWebComponentMarkup = {
  attach: function (context) {
    if (context.id === "node-article-edit-form") {
      document.querySelector("#kpk-keepicker-container").innerHTML =
        '<kpk-keepicker id="keepicker" keycloak-client-id="XXX" api-endpoint="XXX" data-locale="FR" ui-locale="FR"></kpk-keepicker>';
      document
        .querySelector("#keepicker")
        .addEventListener("kpk-insert", (event) => {
          document.querySelector(".keepicker-url").value =
            event.detail.element.previewUrl;
        });
    }
  },
};

List of attributes

Name	Mandatory	Type	Default value	Description
api-endpoint	no	String		API EndpointIf not provided, the user will need to enter the Keepeek instance URL to connect
keycloak-client-id	no	String	Default Keepicker Client ID	Keycloak Client ID
keycloak-idp	no	String	FR	Keycloak IDP to add a SSO button
data-locale	no	String	FR	Data locale
ui-locale	no	String	FR	Interface locale