added image import

cookbook/helper/recipe_html_import.py

@@ -1,13 +1,14 @@
 import json
+import re
 from json.decoder import JSONDecodeError
 
 from bs4 import BeautifulSoup
 from bs4.element import Tag
-# from cookbook.helper.ingredient_parser import parse as parse_ingredient
 from cookbook.helper import recipe_url_import as helper
+from recipe_scrapers._utils import get_host_name, normalize_string
 
 
-def get_recipe_from_source(text, space):
+def get_recipe_from_source(text, url, space):
     def build_node(k, v):
         if isinstance(v, dict):
             node = {
@@ -23,8 +24,8 @@ def get_recipe_from_source(text, space):
             }
         else:
             node = {
-                'name': k + ": " + str(v),
+                'name': k + ": " + normalize_string(str(v)),
-                'value': str(v)
+                'value': normalize_string(str(v))
             }
         return node
 
@@ -49,8 +50,8 @@ def get_recipe_from_source(text, space):
                     kid_list.append(build_node(k, v))
             else:
                 kid_list.append({
-                    'name': kid,
+                    'name': normalize_string(str(kid)),
-                    'value': kid
+                    'value': normalize_string(str(kid))
                 })
         return kid_list
 
@@ -68,15 +69,25 @@ def get_recipe_from_source(text, space):
     recipe_tree = []
     temp_tree = []
     parse_list = []
+    html_data = []
+    images = []
 
     try:
-        parse_list.append(json.loads(text))
+        parse_list.append(remove_graph(json.loads(text)))
     except JSONDecodeError:
         soup = BeautifulSoup(text, "html.parser")
+        html_data = get_from_html(soup)
+        images += get_images_from_source(soup, url)
         for el in soup.find_all('script', type='application/ld+json'):
-            parse_list.append(el)
+            parse_list.append(remove_graph(el))
         for el in soup.find_all(type='application/json'):
-            parse_list.append(el)
+            parse_list.append(remove_graph(el))
+
+    # if a url was not provided, try to find one in the first document
+    if not url:
+        if 'url' in parse_list[0]:
+            url = parse_list[0]['url']
+
 
     # first try finding ld+json as its most common
     for el in parse_list:
@@ -102,28 +113,67 @@ def get_recipe_from_source(text, space):
                 }
             else:
                 node = {
-                    'name': k + ": " + str(v),
+                    'name': k + ": " + normalize_string(str(v)),
-                    'value': str(v)
+                    'value': normalize_string(str(v))
                 }
             temp_tree.append(node)
-        # recipes type might be wrapped in @graph type
-        if '@graph' in el:
-            for x in el['@graph']:
-                if '@type' in x and x['@type'] == 'Recipe':
-                    el = x
 
         if '@type' in el and el['@type'] == 'Recipe':
             recipe_json = helper.find_recipe_json(el, None, space)
             recipe_tree += [{'name': 'ld+json', 'children': temp_tree}]
         else:
             recipe_tree += [{'name': 'json', 'children': temp_tree}]
-
         temp_tree = []
 
-    return recipe_json, recipe_tree
+    return recipe_json, recipe_tree, html_data, images
 
 
-def get_from_html(text, space):
+def get_from_html(soup):
+    INVISIBLE_ELEMS = ('style', 'script', 'head', 'title')
+    html = []
     for s in soup.strings:
         if ((s.parent.name not in INVISIBLE_ELEMS) and (len(s.strip()) > 0)):
-            print(s.parent.name, s, len(s))
+            html.append(s)
+    return html
+
+# todo - look for site info in the soup
+def get_images_from_source(soup, url):
+    sources = ['src', 'srcset', 'data-src']
+    images = []
+    img_tags = soup.find_all('img')
+    if url:
+        site = get_host_name(url)
+        prot = url.split(':')[0]
+
+    urls = []
+    for img in img_tags:
+        for src in sources:
+            try:
+                urls.append(img[src])
+            except KeyError:
+                pass
+
+    for u in urls:
+        u = u.split('?')[0]
+        filename = re.search(r'/([\w_-]+[.](jpg|jpeg|gif|png))$', u)
+        if filename:
+            if (('http' not in u) and (url)):
+                # sometimes an image source can be relative
+                # if it is provide the base url
+                u = '{}://{}{}'.format(prot, site, u)
+            if 'http' in u:
+                images.append(u)
+    return images
+
+def remove_graph(el):
+    # recipes type might be wrapped in @graph type
+    if isinstance(el, Tag):
+        try:
+            el = json.loads(el.string)
+        except TypeError:
+            pass
+    if '@graph' in el:
+        for x in el['@graph']:
+            if '@type' in x and x['@type'] == 'Recipe':
+                el = x
+    return el

cookbook/helper/recipe_url_import.py

@@ -9,9 +9,8 @@ from bs4 import BeautifulSoup
 from cookbook.helper.ingredient_parser import parse as parse_single_ingredient
 from cookbook.models import Keyword
 from django.utils.dateparse import parse_duration
-from html import unescape
+from django.utils.translation import gettext as _
-from recipe_scrapers._schemaorg import SchemaOrgException
+from recipe_scrapers._utils import get_minutes, normalize_string
-from recipe_scrapers._utils import get_minutes
 
 
 def get_from_html_old(html_text, url, space):
@@ -109,7 +108,9 @@ def find_recipe_json(ld_json, url, space):
     else:
         ld_json['image'] = ""
 
-    if 'description' not in ld_json:
+    if 'description' in ld_json:
+        ld_json['description'] = normalize_string(ld_json['description'] )
+    else:
         ld_json['description'] = ""
 
     if 'cookTime' in ld_json:
@@ -123,18 +124,11 @@ def find_recipe_json(ld_json, url, space):
         ld_json['prepTime'] = 0
 
     if 'servings' in ld_json:
-        if type(ld_json['servings']) == str:
+        ld_json['servings'] = parse_servings(ld_json['servings'])
-            ld_json['servings'] = int(re.search(r'\d+', ld_json['servings']).group())
+    elif 'recipeYield' in ld_json:
+        ld_json['servings'] = parse_servings(ld_json['recipeYield'])
     else:
         ld_json['servings'] = 1
-    try:
-        if 'recipeYield' in ld_json:
-            if type(ld_json['recipeYield']) == str:
-                ld_json['servings'] = int(re.findall(r'\b\d+\b', ld_json['recipeYield'])[0])
-            elif type(ld_json['recipeYield']) == list:
-                ld_json['servings'] = int(re.findall(r'\b\d+\b', ld_json['recipeYield'][0])[0])
-    except Exception as e:
-        print(e)
 
     for key in list(ld_json):
         if key not in [
@@ -154,14 +148,14 @@ def get_from_scraper(scrape, space):
 
     try:
         description = scrape.schema.data.get("description") or ''
-        recipe_json['prepTime'] = _utils.get_minutes(scrape.schema.data.get("prepTime")) or 0
+        recipe_json['prepTime'] = get_minutes(scrape.schema.data.get("prepTime")) or 0
-        recipe_json['cookTime'] = _utils.get_minutes(scrape.schema.data.get("cookTime")) or 0
+        recipe_json['cookTime'] = get_minutes(scrape.schema.data.get("cookTime")) or 0
     except AttributeError:
         description = ''
         recipe_json['prepTime'] = 0
         recipe_json['cookTime'] = 0
 
-    recipe_json['description'] = description
+    recipe_json['description'] = normalize_string(description)
 
     try:
         servings = scrape.yields()
@@ -249,7 +243,7 @@ def parse_name(name):
             name = name[0]
         except Exception:
             name = 'ERROR'
-    return name
+    return normalize_string(name)
 
 
 def parse_ingredients(ingredients):
@@ -342,7 +336,7 @@ def parse_instructions(instructions):
     instructions = re.sub(' +', ' ', instructions)
     instructions = re.sub('</p>', '\n', instructions)
     instructions = re.sub('<[^<]+?>', '', instructions)
-    return instructions
+    return normalize_string(instructions)
 
 
 def parse_image(image):
@@ -360,6 +354,19 @@ def parse_image(image):
     return image
 
 
+def parse_servings(servings):
+    if type(servings) == str:
+        try:
+            servings = int(re.search(r'\d+', servings).group())
+        except AttributeError:
+            servings = 1
+    elif type(servings) == list:
+        try:
+            servings = int(re.findall(r'\b\d+\b', servings[0])[0])
+        except KeyError:
+            servings = 1
+    return servings
+
 def parse_cooktime(cooktime):
     if type(cooktime) not in [int, float]:
         try:
@@ -400,6 +407,7 @@ def parse_keywords(keyword_json, space):
     keywords = []
     # keywords as list
     for kw in keyword_json:
+        kw = normalize_string(kw)
         if k := Keyword.objects.filter(name=kw, space=space).first():
             keywords.append({'id': str(k.id), 'text': str(k)})
         else:
@@ -413,7 +421,7 @@ def listify_keywords(keyword_list):
     try:
         if type(keyword_list[0]) == dict:
             return keyword_list
-    except KeyError:
+    except (KeyError, IndexError):
         pass
     if type(keyword_list) == str:
         keyword_list = keyword_list.split(',')

cookbook/templates/url_import.html

@@ -37,11 +37,11 @@
             <div class="tab-pane fade show active" id="nav-url" role="tabpanel">
                 <div class="btn-group btn-group-toggle" data-toggle="buttons">
                     <label class="btn btn-outline-info btn-sm active" @click="automatic=true">
-                    <input type="radio" name="auto" id="auto" autocomplete="off" checked> Automatic
+                    <input type="radio"  autocomplete="off" checked> Automatic
                     </label>
 
-                    <label class="btn btn-outline-info btn-sm disabled" @click="automatic=false">
+                    <label class="btn btn-outline-info btn-sm" @click="automatic=false">
-                    <input type="radio" name="auto" id="manual" autocomplete="off"> Manual
+                    <input type="radio" autocomplete="off"> Manual
                     </label>
                 </div>
                 <div class="input-group my-2">
@@ -58,22 +58,22 @@
             <div class=" tab-pane fade show" id="nav-app" role="tabpanel">
                 <div class="btn-group btn-group-toggle" data-toggle="buttons">
                     <label class="btn btn-outline-info btn-sm active" @click="recipe_app='DEFAULT'">
-                    <input type="radio" name="auto" id="auto" autocomplete="off" checked> Tandoor
+                    <input type="radio" autocomplete="off" checked> Tandoor
                     </label>
                     <label class="btn btn-outline-info btn-sm" @click="recipe_app='PAPRIKA'">
-                    <input type="radio" name="auto" id="manual" autocomplete="off"> Paprika
+                    <input type="radio" autocomplete="off"> Paprika
                     </label>
                     <label class="btn btn-outline-info btn-sm" @click="recipe_app='NEXTCLOUD'">
-                    <input type="radio" name="auto" id="manual" autocomplete="off"> Nextcloud Cookbook
+                    <input type="radio" autocomplete="off"> Nextcloud Cookbook
                     </label>
                     <label class="btn btn-outline-info btn-sm" @click="recipe_app='MEALIE'">
-                    <input type="radio" name="auto" id="manual" autocomplete="off"> Mealie
+                    <input type="radio" autocomplete="off"> Mealie
                     </label>
                     <label class="btn btn-outline-info btn-sm" @click="recipe_app='CHOWDOWN'">
-                    <input type="radio" name="auto" id="manual" autocomplete="off"> Chowdown
+                    <input type="radio" autocomplete="off"> Chowdown
                     </label>
                     <label class="btn btn-outline-info btn-sm" @click="recipe_app='SAFRON'">
-                    <input type="radio" name="auto" id="manual" autocomplete="off"> Safron
+                    <input type="radio" autocomplete="off"> Safron
                     </label>
                 </div>
                 <b-form-file
@@ -93,18 +93,18 @@
             <div class=" tab-pane fade show" id="nav-source" role="tabpanel">
                 <div class="btn-group btn-group-toggle" data-toggle="buttons">
                     <label class="btn btn-outline-info btn-sm active" @click="automatic=true">
-                    <input type="radio" name="auto" id="auto" autocomplete="off" checked> Automatic
+                    <input type="radio" autocomplete="off" checked> Automatic
                     </label>
 
                     <label class="btn btn-outline-info btn-sm" @click="automatic=false">
-                    <input type="radio" name="auto" id="manual" autocomplete="off"> Manual
+                    <input type="radio" autocomplete="off"> Manual
                     </label>
                 </div>
                 <div class="input-group my-2">
                     <textarea class="form-control input-group-append" v-model="source_data" rows=10 placeholder="{% trans 'Paste json or html source here to load recipe.' %}" style="font-size: 12px">
                     </textarea>
                 </div>
-                <button @click="importAppRecipe()" class="btn btn-primary shadow-none" type="button"
+                <button @click="loadSource()" class="btn btn-primary shadow-none" type="button"
                             id="id_btn_app"><i class="fas fa-code"></i> {% trans 'Import' %} 
                 </button>
             </div>
@@ -121,6 +121,7 @@
         <div class="container-fluid" v-if="preview" id="manage_tree">
             <div class="row">
                 <div class="col" style="max-width:50%">
+                    <!-- start of preview card -->
                     <div class="card card-border-primary" >
                         <div class="card-header">
                             <h3>{% trans 'Preview Recipe Data' %}</h3>
@@ -129,10 +130,12 @@
                         <div class="card-body p-2">
 
                             <div class="card mb-2">
-                                <div class="card-header" style="display:flex; justify-content:space-between;">
+                                <div class="card-header">
-                                    {% trans 'Name' %}
+                                    <div class="row px-3" style="justify-content:space-between;">
-                                    <!-- this and subsequent delete commands should be fixed to identify which model attribute the element is referring to -->
+                                        {% trans 'Name' %}
-                                    <i class="fas fa-eraser"  style="cursor:pointer;" @click="deletePreview('name')" title="{% trans 'Clear Contents'%}"></i>
+                                        <i class="fas fa-eraser"  style="cursor:pointer;" @click="recipe_json.name=''" title="{% trans 'Clear Contents'%}"></i>
+                                    </div>
+                                    <div class="small text-muted">{% trans 'Text dragged here will be appended to the name.'%}</div>
                                 </div>
                                 
                                 <div class="card-body drop-zone" @drop="replacePreview('name', $event)" @dragover.prevent @dragenter.prevent>
@@ -141,9 +144,12 @@
                             </div>
 
                             <div class="card mb-2">
-                                <div class="card-header" style="display:flex; justify-content:space-between;">
+                                <div class="card-header">
-                                    {% trans 'Description' %}
+                                    <div class="row px-3" style="justify-content:space-between;">
-                                    <i class="fas fa-eraser"  style="cursor:pointer;" @click="deletePreview('description')" title="{% trans 'Clear Contents'%}"></i>
+                                        {% trans 'Description' %}
+                                        <i class="fas fa-eraser"  style="cursor:pointer;" @click="recipe_json.description=''" title="{% trans 'Clear Contents'%}"></i>
+                                    </div>
+                                    <div class="small text-muted">{% trans 'Text dragged here will be appended to the description.'%}</div>
                                 </div>
                                 <div class="card-body drop-zone" @drop="replacePreview('description', $event)" @dragover.prevent @dragenter.prevent>
                                     <div class="card-text">[[recipe_json.description]]</div>
@@ -154,7 +160,7 @@
                                 <div class="card-header">
                                     <div class="row px-3" style="justify-content:space-between;">
                                         {% trans 'Keywords' %}
-                                        <i class="fas fa-eraser"  style="cursor:pointer;" @click="deletePreview('keywords')" title="{% trans 'Clear Contents'%}"></i>
+                                        <i class="fas fa-eraser"  style="cursor:pointer;" @click="recipe_json.keywords=[]" title="{% trans 'Clear Contents'%}"></i>
                                     </div>
                                     <div class="small text-muted">{% trans 'Keywords dragged here will be appended to current list'%}</div>
                                 </div>
@@ -168,7 +174,7 @@
                             <div class="card mb-2">
                                 <div class="card-header" style="display:flex; justify-content:space-between;">
                                     {% trans 'Image' %}
-                                    <i class="fas fa-eraser"  style="cursor:pointer;" @click="deletePreview('image')" title="{% trans 'Clear Contents'%}"></i>
+                                    <i class="fas fa-eraser"  style="cursor:pointer;" @click="recipe_json.image=''" title="{% trans 'Clear Contents'%}"></i>
                                 </div>
                                 <div class="card-body m-0 p-0 drop-zone"   @drop="replacePreview('image', $event)" @dragover.prevent @dragenter.prevent>
                                     <img class="card-img" v-bind:src="[[recipe_json.image]]" alt="Recipe Image">
@@ -180,7 +186,7 @@
                                     <div class="card" >
                                         <div class="card-header p-1" style="display:flex; justify-content:space-between;">
                                             {% trans 'Servings' %}
-                                            <i class="fas fa-eraser"  style="cursor:pointer;" @click="deletePreview('servings')" title="{% trans 'Clear Contents'%}"></i>
+                                            <i class="fas fa-eraser"  style="cursor:pointer;" @click="recipe_json.servings=''" title="{% trans 'Clear Contents'%}"></i>
                                         </div>
                                         <div class="card-body p-2 drop-zone"   @drop="replacePreview('servings', $event)" @dragover.prevent @dragenter.prevent>
                                             <div class="card-text">[[recipe_json.servings]]</div>
@@ -191,7 +197,7 @@
                                     <div class="card">
                                         <div class="card-header p-1" style="display:flex; justify-content:space-between;">
                                             {% trans 'Prep Time' %}
-                                            <i class="fas fa-eraser"  style="cursor:pointer;" @click="deletePreview('prepTime')" title="{% trans 'Clear Contents'%}"></i>
+                                            <i class="fas fa-eraser"  style="cursor:pointer;" @click="recipe_json.prepTime=''" title="{% trans 'Clear Contents'%}"></i>
                                         </div>
                                         <div class="card-body p-2 drop-zone"   @drop="replacePreview('prepTime', $event)" @dragover.prevent @dragenter.prevent>
                                             <div class="card-text">[[recipe_json.prepTime]]</div>
@@ -202,7 +208,7 @@
                                     <div class="card">
                                         <div class="card-header p-1" style="display:flex; justify-content:space-between;">
                                             {% trans 'Cook Time' %}
-                                            <i class="fas fa-eraser"  style="cursor:pointer;" @click="deletePreview('cookTime')" title="{% trans 'Clear Contents'%}"></i>
+                                            <i class="fas fa-eraser"  style="cursor:pointer;" @click="recipe_json.cookTime=''" title="{% trans 'Clear Contents'%}"></i>
                                         </div>
                                         <div class="card-body p-2 drop-zone"   @drop="replacePreview('cookTime', $event)" @dragover.prevent @dragenter.prevent>
                                             <div class="card-text">[[recipe_json.cookTime]]</div>
@@ -215,7 +221,7 @@
                                 <div class="card-header">
                                     <div class="row px-3" style="display:flex; justify-content:space-between;">
                                         {% trans 'Ingredients' %}
-                                        <i class="fas fa-eraser"  style="cursor:pointer;" @click="deletePreview('ingredients')" title="{% trans 'Clear Contents'%}"></i>
+                                        <i class="fas fa-eraser"  style="cursor:pointer;" @click="recipe_json.recipeIngredient=[]" title="{% trans 'Clear Contents'%}"></i>
                                     </div>
                                     <div class="small text-muted">{% trans 'Ingredients dragged here will be appended to current list.'%}</div>
                                 </div>
@@ -237,7 +243,7 @@
                                 <div class="card-header">
                                     <div class="row px-3" style="justify-content:space-between;">    
                                         {% trans 'Instructions' %}
-                                        <i class="fas fa-eraser"  style="cursor:pointer;" @click="deletePreview('instructions')" title="{% trans 'Clear Contents'%}"></i>
+                                        <i class="fas fa-eraser"  style="cursor:pointer;" @click="recipe_json.recipeInstructions=''" title="{% trans 'Clear Contents'%}"></i>
                                     </div>
                                     <div class="small text-muted">{% trans 'Recipe instructions dragged here will be appended to current instructions.'%}</div>
                                 </div>
@@ -254,7 +260,7 @@
                     </button>
                 </div>
                 
-                <!-- start of json tree -->
+                <!-- start of source data -->
                 <div class="col" style="max-width:50%">
                     <div class="card card-border-primary">
                         <div class="card-header"> 
@@ -263,9 +269,35 @@
                                 {% trans 'Drag recipe attributes from below into the appropriate box on the left. Click any node to display its full properties.' %} 
                             </div>
                         </div>
-                        
+                        <div class="btn-group btn-group-toggle" data-toggle="buttons">
-                        <div class="card-body">
+                            <label class="btn btn-outline-info btn-sm active" @click="preview_type='json'">
-                            <v-jstree :data="recipe_tree"
+                            <input type="radio" autocomplete="off" checked> json
+                            </label>
+                            <label class="btn btn-outline-info btn-sm" @click="preview_type='html'">
+                            <input type="radio" autocomplete="off"> html
+                            </label>
+                            <label class="btn btn-outline-info btn-sm" @click="preview_type='image'">
+                            <input type="radio" autocomplete="off"> images
+                            </label>
+                        </div>
+                        <div class="card-body p-1">
+                            <div class="card card-border-primary" v-if="show_blank">
+                                <div class="card-header">
+                                    <div class="row px-3" style="justify-content:space-between;">
+                                        {% trans 'Blank Field' %}
+                                        <i class="fas fa-eraser"  style="cursor:pointer;" @click="blank_field=''" title="{% trans 'Clear Contents'%}"></i>
+                                    </div>
+                                    <div class="small text-muted">{% trans 'Items dragged to Blank Field will be appended.'%}</div>
+                                </div>
+                                <div class="card-body drop-zone"  
+                                    v-model: blank_field
+                                    @drop="replacePreview()" 
+                                    @dragover.prevent 
+                                    @dragenter.prevent>
+                                </div>
+                            </div>
+                            <!-- start of json data -->
+                            <v-jstree v-if="preview_type=='json'" :data="recipe_tree"
                                     text-field-name="name"
                                     collapse:true
                                     draggable
@@ -289,6 +321,30 @@
                                 
                                 </template>
                             </v-jstree>
+                            <!-- start of html data -->
+                            <div v-if="preview_type=='html'">
+                                <ul class="list-group list-group-flush" v-for="(txt, key) in recipe_html">
+                                        <div class="list-group-item bg-light m-0 small"  
+                                            draggable 
+                                            @dragstart="htmlDragStart($event)"
+                                            style="display:flex; justify-content:space-between;"> 
+                                        [[txt]] 
+                                        <i class="fas fa-minus-square"  style="cursor:pointer; color:red" @click="$delete(recipe_html, key)" title="{% trans 'Delete Text'%}"></i>
+                                        </div>
+                                </ul>
+                            </div>
+                            <!-- start of images -->
+                            <div v-if="preview_type=='image'">
+                                <ul class="list-group list-group-flush" v-for="(img, key) in images">
+                                        <div class="list-group-item bg-light m-0 small"  
+                                            draggable 
+                                            @dragstart="imageDragStart($event)"
+                                            style="display:flex; justify-content:space-between;"> 
+                                        <img class="card-img" v-bind:src=[[img]] alt="Image">
+                                        <i class="fas fa-minus-square"  style="cursor:pointer; color:red" @click="$delete(images, key)" title="{% trans 'Delete image'%}"></i>
+                                        </div>
+                                </ul>
+                            </div>
                         </div>
                     </div>
                 </div>
@@ -547,13 +603,18 @@
                 error: undefined,
                 loading: false,
                 preview: false,
+                preview_type: 'json',
                 all_keywords: false,
                 importing_recipe: false,
                 recipe_json: undefined,
                 recipe_tree: undefined,
+                recipe_html: undefined,
                 automatic: true,
+                show_blank: false,
+                blank_field: '',
                 recipe_app: 'DEFAULT',
-                recipe_files: []
+                recipe_files: [],
+                images: [],
             },
             directives: {
                 tabindex: {
@@ -585,19 +646,19 @@
                     this.images = []
                     this.error = undefined
                     this.loading = true
+                    this.preview = false
                     if (this.automatic) {
                         console.log('true')
                     }
-                    this.$http.post("{% url 'api_recipe_from_url' %}", {'url': this.remote_url}, {emulateJSON: true}).then((response) => {
+                    this.$http.post("{% url 'api_recipe_from_url' %}", {'url': this.remote_url, 'auto':this.automatic}, {emulateJSON: true}).then((response) => {
                         console.log(response.data)
-                        this.recipe_json = response.data['recipe_json'];
-                        this.recipe_tree = response.data['recipe_tree'];
-                        this.recipe_html = response.data['recipe_html'];
-                        this.images = response.data['images'];
                         if (this.automatic) {
-                            this.recipe_data = this.recipe_json;
+                            this.recipe_data = response.data;
-                            this.preview = false
                         } else {
+                            this.recipe_json = response.data['recipe_json'];
+                            this.recipe_tree = response.data['recipe_tree'];
+                            this.recipe_html = response.data['recipe_html'];
+                            this.images = response.data['images'];
                             this.preview = true
                         }
                         this.loading = false
@@ -618,8 +679,10 @@
                     this.recipe_data = undefined
                     this.recipe_json = undefined
                     this.recipe_tree = undefined
+                    this.images = []
                     this.error = undefined
                     this.loading = true
+                    this.preview = false
                     this.$http.post("{% url 'api_recipe_from_source' %}", {'data': this.source_data, 'auto':this.automatic}, {emulateJSON: true}).then((response) => {
                         console.log(response.data)
                         if (this.automatic) {
@@ -628,6 +691,7 @@
                         } else {
                             this.recipe_json = response.data['recipe_json'];
                             this.recipe_tree = response.data['recipe_tree'];
+                            this.recipe_html = response.data['recipe_html'];
                             this.preview = true
                         }
                         this.loading = false
@@ -680,6 +744,7 @@
                 },
                 importAppRecipe: function() {
                     this.error = undefined
+                    this.preview = false
                     this.loading = true
                     let formData = new FormData();
                     let files = []
@@ -787,37 +852,6 @@
                     var index = node.parentItem.indexOf(item)
                     node.parentItem.splice(index, 1)
                 },
-                deletePreview: function(field) {
-                    switch (field) {
-                        case 'name':
-                            this.recipe_json.name=""
-                            break;
-                        case 'description':
-                            this.recipe_json.description=""
-                            break;
-                        case 'image':
-                            this.recipe_json.image=""
-                            break;
-                        case 'keywords':
-                            this.recipe_json.keywords=[]
-                            break;
-                        case 'servings':
-                            this.recipe_json.servings=""
-                            break;
-                        case 'prepTime':
-                            this.recipe_json.prepTime=""
-                            break;
-                        case 'cookTime':
-                            this.recipe_json.cookTime=""
-                            break;
-                        case 'ingredients':
-                            this.recipe_json.recipeIngredient=[]
-                            break;
-                        case 'instructions':
-                            this.recipe_json.recipeInstructions=""
-                            break;
-                    }
-                },
                 itemClick: function (node, item, e) {
                     this.makeToast(gettext('Details'), node.model.value, 'info')
                 },
@@ -828,6 +862,14 @@
                     e.dataTransfer.setData('value', node.model.value)
                     
                 },
+                htmlDragStart: function (e) {
+                    console.log(e.target.innerText)
+                    e.dataTransfer.setData('value', e.target.innerText)
+                },
+                imageDragStart: function (e) {
+                    console.log(e.target.src)
+                    e.dataTransfer.setData('value', e.target.src)
+                },
                 replacePreview: function(field, e) {
                     v = e.dataTransfer.getData('value')
                     if (e.dataTransfer.getData('hasChildren')) {
@@ -836,10 +878,10 @@
                     }
                     switch (field) {
                         case 'name':
-                            this.recipe_json.name=v
+                            this.recipe_json.name = [this.recipe_json.name, v].filter(Boolean).join(" ");
                             break;
                         case 'description':
-                            this.recipe_json.description=v
+                            this.recipe_json.description = [this.recipe_json.description, v].filter(Boolean).join(" ");
                             break;
                         case 'image':
                             this.recipe_json.image=v
@@ -870,10 +912,12 @@
                                 console.log(err)
                                 this.makeToast(gettext('Error'), gettext('Something went wrong.'), 'danger')
                             })
-                            
                             break;
                         case 'instructions':
-                            this.recipe_json.recipeInstructions=this.recipe_json.recipeInstructions.concat(v)
+                            this.recipe_json.recipeInstructions = [this.recipe_json.recipeInstructions, v].filter(Boolean).join("\n\n");
+                            break;
+                        case 'blank':
+                            this.blank_field = [this.blank_field, v].filter(Boolean).join(" ");
                             break;
                     }
                 },

cookbook/views/api.py

@@ -628,11 +628,14 @@ def recipe_from_json(request):
 
 
 @group_required('user')
-def recipe_from_url(request):
+def recipe_from_source(request):
-    url = request.POST['url']
+    url = request.POST.get('url', None)
+    data = request.POST.get('data', None)
+    mode = request.POST.get('mode', None)
+    auto = request.POST.get('auto', 'true')
 
-    headers = {
+    HEADERS = {
-        'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/83.0.4103.106 Safari/537.36'  # noqa: E501
+        "User-Agent": "Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.9.0.7) Gecko/2009021910 Firefox/3.0.7"
     }
 
     if (not url and not data) or (mode == 'url' and not url) or (mode == 'source' and not data):
@@ -706,11 +709,17 @@ def recipe_from_url(request):
 
 
 @group_required('user')
-def recipe_from_source(request):
+def recipe_from_source(request, url=None, url_text=None):
-    json_data = request.POST['data']
+    if url_text:
-    auto = request.POST['auto']
+        json_data = url_text
+    else:
+        json_data = request.POST['data']
+    if 'auto' in request.POST:
+        auto = request.POST['auto']
+    else:
+        auto = 'true'
 
-    recipe_json, recipe_tree = get_recipe_from_source(json_data, request.space)
+    recipe_json, recipe_tree, recipe_html, images = get_recipe_from_source(json_data, url, request.space)
     if len(recipe_tree) == 0 and len(recipe_json) == 0:
         return JsonResponse(
             {
@@ -722,7 +731,7 @@ def recipe_from_source(request):
     else:
         if auto == "true":
             return JsonResponse({'recipe_json': recipe_json})
-        else: 
+        else:
             # overide keyword structure from dict to list
             kws = []
             for kw in recipe_json['keywords']:
@@ -730,7 +739,9 @@ def recipe_from_source(request):
             recipe_json['keywords'] = kws
             return JsonResponse({
                 'recipe_tree': recipe_tree,
-                'recipe_json': recipe_json
+                'recipe_json': recipe_json,
+                'recipe_html': recipe_html,
+                'images': images,
             })