1.11.0 • Published 8 months ago

@keepeek/keepicker-react v1.11.0

Weekly downloads
-
License
-
Repository
-
Last release
8 months ago

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

NameMandatoryTypeDefault valueDescription
api-endpointnoStringAPI EndpointIf not provided, the user will need to enter the Keepeek instance URL to connect
keycloak-client-idnoStringDefault Keepicker Client IDKeycloak Client ID
keycloak-idpnoStringFRKeycloak IDP to add a SSO button
data-localenoStringFRData locale
ui-localenoStringFRInterface locale

List of events

NameDescription
kpk-insertEvent dispached when inserting one element
kpk-insert-linkEvent dispached when inserting a generated picture
1.6.0-beta.86

8 months ago

1.6.0-beta.87

8 months ago

1.7.1

8 months ago

1.6.0-beta.84

8 months ago

1.6.0-beta.85

8 months ago

1.6.0-beta.82

8 months ago

1.6.0-beta.83

8 months ago

1.6.0-beta.79

8 months ago

1.6.0-beta.77

8 months ago

1.6.0-beta.78

8 months ago

1.6.0-beta.80

8 months ago

1.6.0-beta.81

8 months ago

1.6.0-beta.75

8 months ago

1.6.0-beta.76

8 months ago

1.6.0-beta.73

8 months ago

1.6.0-beta.74

8 months ago

1.6.0-beta.71

8 months ago

1.6.0-beta.72

8 months ago

1.6.0-beta.70

8 months ago

1.10.0

9 months ago

1.11.0

8 months ago

1.6.0-beta.59

9 months ago

1.6.0-beta.57

9 months ago

1.6.0-beta.58

9 months ago

1.6.0-beta.56

9 months ago

1.6.0-beta.64

9 months ago

1.6.0-beta.65

9 months ago

1.6.0-beta.62

9 months ago

1.6.0-beta.63

9 months ago

1.6.0-beta.68

9 months ago

1.6.0-beta.69

8 months ago

1.6.0-beta.66

9 months ago

1.6.0-beta.67

9 months ago

1.6.0-beta.60

9 months ago

1.6.0-beta.61

9 months ago

1.6.0-beta.53

9 months ago

1.6.0-beta.54

9 months ago

1.6.0-beta.51

9 months ago

1.6.0-beta.52

9 months ago

1.6.0-beta.55

9 months ago

1.6.0-beta.50

9 months ago

1.6.0-beta.49

9 months ago

1.6.0-beta.48

9 months ago

1.9.0

9 months ago

1.6.0-beta.47

10 months ago

1.6.0-beta.28

12 months ago

1.6.0-beta.29

12 months ago

1.6.0-beta.26

1 year ago

1.6.0-beta.27

12 months ago

1.6.0-beta.24

1 year ago

1.6.0-beta.25

1 year ago

1.6.0-beta.39

11 months ago

1.8.0

10 months ago

1.6.0-beta.37

11 months ago

1.6.0-beta.38

11 months ago

1.6.0-beta.31

11 months ago

1.6.0-beta.32

11 months ago

1.6.0-beta.30

12 months ago

1.6.0-beta.35

11 months ago

1.6.0-beta.36

11 months ago

1.6.0-beta.42

10 months ago

1.6.0-beta.43

10 months ago

1.6.0-beta.40

11 months ago

1.6.0-beta.41

11 months ago

1.6.0-beta.46

10 months ago

1.6.0-beta.44

10 months ago

1.6.0-beta.45

10 months ago

1.7.0

11 months ago

1.6.0-beta.23

1 year ago

1.6.0-beta.20

1 year ago

1.6.0-beta.21

1 year ago

1.6.0-beta.22

1 year ago

1.6.0-beta.19

1 year ago

1.6.0

1 year ago

1.6.0-beta.18

1 year ago

1.6.0-beta.17

1 year ago

1.6.0-beta.15

1 year ago

1.6.0-beta.16

1 year ago

1.6.0-beta.14

1 year ago

1.6.0-beta.13

1 year ago

1.6.0-beta.12

1 year ago

1.6.0-beta.10

1 year ago

1.6.0-beta.11

1 year ago

1.6.0-beta.9

1 year ago

1.6.0-beta.8

1 year ago

1.6.0-beta.7

1 year ago

1.6.0-beta.6

1 year ago

1.6.0-beta.4

1 year ago

1.6.0-beta.5

1 year ago

1.6.0-beta.3

1 year ago

1.6.0-beta.2

1 year ago

1.6.0-beta.1

1 year ago

1.5.0-beta.6

1 year ago

1.5.0-beta.5

1 year ago

1.5.0

1 year ago

1.5.0-beta.4

1 year ago

1.5.0-beta.2

1 year ago

1.5.0-beta.3

1 year ago

1.5.0-beta.1

2 years ago

1.4.1-beta.2

2 years ago

1.4.1-beta.1

2 years ago

1.2.0-beta.1

2 years ago

1.4.0

2 years ago

1.3.0

2 years ago

1.2.0

2 years ago

1.1.0

2 years ago

1.0.0-beta.51

2 years ago

1.0.0-beta.50

2 years ago

1.0.0-beta.49

2 years ago

1.0.0-beta.48

2 years ago

1.0.0-beta.47

2 years ago

1.0.0-beta.46

2 years ago

1.0.0-beta.45

2 years ago

1.0.0-beta.44

2 years ago

1.0.0-beta.43

2 years ago

1.0.0-beta.42

2 years ago

1.0.0-beta.41

2 years ago

1.0.0-beta.40

2 years ago

1.0.0-beta.39

2 years ago

1.0.0-beta.38

2 years ago

1.0.0-beta.37

2 years ago

1.0.0-beta.36

2 years ago

1.0.0-beta.35

2 years ago

1.0.0-beta.34

2 years ago

1.0.0-beta.33

2 years ago

1.0.0-beta.32

2 years ago

1.0.0-beta.31

2 years ago

1.0.0-beta.30

2 years ago

1.0.0-beta.29

2 years ago

1.0.0-beta.28

2 years ago

1.0.0-beta.27

2 years ago

1.0.0-beta.26

2 years ago

1.0.0-beta.25

2 years ago

1.0.0-beta.24

2 years ago

1.0.0-beta.23

2 years ago

1.0.0-beta.22

2 years ago

1.0.0-beta.21

2 years ago

1.0.0-beta.20

2 years ago

1.0.0-beta.19

2 years ago

1.0.0-beta.18

2 years ago

1.0.0-beta.17

2 years ago

1.0.0-beta.16

2 years ago

1.0.0-beta.15

2 years ago

1.0.0-beta.14

2 years ago

1.0.0-beta.13

2 years ago